随着前端技术的不断发展，浏览器的支持和实现也在不断更新。在 ES2021 中，浏览器不再支持通过 window.dialogArguments 和 window.opener 进行赋值，这对于前端开发者来说是一个重要的变化。
window.dialogArguments 和 window.opener 的作用
在了解更新之前，我们先来了解一下 window.dialogArguments 和 window.opener 的作用。
window.dialogArguments
window.dialogArguments 是一个只读属性，用于访问打开当前窗口的窗口（调用 window.open 方法时）通过 showModalDialog 方法传递的参数。在 showModalDialog 方法被调用时，调用 window.open 方法并传递一个数组作为第二个参数，该数组的元素会被传递到新打开窗口的 window.dialogArguments 属性中。
例如：
// 父窗口
var value = showModalDialog('dialog.htm', ['hello', 'world']);
console.log(value); // 子窗口关闭后打印数组 ['hello', 'world']在子窗口中可以通过 window.dialogArguments 属性获取到父窗口传递过来的数组值。
window.opener
window.opener 是指打开当前窗口的窗口（例如通过 window.open 方法打开一个新的窗口）。在子窗口中，可以通过 window.opener 属性访问父窗口的全局对象。
例如：
// 父窗口
var childWindow = window.open('child.htm', 'childWindow');
console.log(childWindow.opener === window); // true
// 子窗口
console.log(opener === window.parent); // true在子窗口中可以通过 window.opener 属性获取到父窗口的全局对象。
浏览器不再支持 window.dialogArguments、window.opener 赋值
由于安全性问题，浏览器厂商决定不再支持通过 window.dialogArguments、window.opener 进行赋值。这意味着在 ES2021 中，以下代码将无法运行：
// 父窗口
var childWindow = window.open('child.htm', 'childWindow');
// 子窗口
window.opener.document.write('Hello, world!'); // 报错
window.dialogArguments[0] = 'Hello'; // 报错在上面的代码中，我们尝试在子窗口中修改父窗口的 document 和传递的数组值，但这在 ES2021 中将不再被支持，会抛出错误。
替代方案
为了解决这个安全问题，ES2021 中提供了一些替代方案。
postMessage
postMessage 是窗口之间进行通信的一种安全方式。可以通过 postMessage 方法在不同窗口之间传递数据。
例如：
-- -------------------- ---- -------
-- ---
--- ----------- - ------------------------ ---------------
-- ---
---------------------------------- --------------- -
--------------- --- -------------- -
-------------------------------- -------- --------------
-
---在这个例子中，父窗口和子窗口可以通过 postMessage 方法进行通信。
localStorage
localStorage 是浏览器提供的一种本地存储方案。可以将数据存储在本地，不同窗口之间可以通过 localStroage 进行数据通信。
例如：
-- -------------------- ---- -------
-- ---
------------------------------- ------- ---------
--- ----------- - ------------------------ ---------------
-- ---
---------------------------------- -------- ------- -
-- ---------- --- ---------- -
---------------------------- -- ------ ------
-
---在这个例子中，父窗口将数据存储在 localStorage 中，子窗口可以通过监听 storage 事件来获取数据。
参考示例代码
-- -------------------- ---- -------
-- ---
--- ----------- - ------------------------ ---------------
------------------------------ --- -------- -- ----
------------------------------- ------- ---------
-- ---
---------------------------------- --------------- -
--------------- --- -------------- -
-------------------------------- -------- --------------
-
---
---------------------------------- -------- ------- -
-- ---------- --- ---------- -
---------------------------- -- ------ ------
-
---结论
ES2021 中浏览器不再支持 window.dialogArguments、window.opener 赋值，为了窗口之间的安全通信，我们可以使用替代方案，例如 postMessage 和 localStorage。了解并掌握这些替代方案可以提高前端开发的工作效率和开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6775f41b6d66e0f9aa07b95a