JavaScript 父子窗口传值：showModalDialog与Firefox window.open 实例

"JavaScript 中的 `showModalDialog` 和 Firefox 的 `window.open` 方法用于在父子窗口之间传递值的示例代码" JavaScript 提供了多种方法来创建和操作窗口，其中包括 `showModalDialog` 和 `window.open`。这两个函数允许开发者打开新的浏览器窗口，并在这些窗口之间传递数据。下面我们将详细探讨这两个方法以及它们如何处理父子窗口间的值传递。 ### 1. `showModalDialog` 方法 `showModalDialog` 是一个在 JavaScript 中用来打开模态对话框的函数，它会阻止用户与当前页面进行交互，直到对话框关闭。这个方法的基本语法如下： ```javascript var returnValue = window.showModalDialog(url, [startingValue], [features]); ``` - `url`: 对话框加载的页面 URL。 - `startingValue`: 可选，传递给对话框窗口的初始值。 - `features`: 可选，窗口特性字符串，如窗口大小、位置等。 返回值 `returnValue` 表示对话框关闭时返回的值，通常用于传递用户在对话框中的操作结果。 ### 2. `window.open` 方法 `window.open` 方法用于打开新窗口或标签页，其语法如下： ```javascript var newWindow = window.open(url, name, features); ``` - `url`: 新窗口加载的页面 URL。 - `name`: 窗口的名称，可用于将来引用该窗口。 - `features`: 窗口特性字符串，与 `showModalDialog` 类似。 虽然 `window.open` 不是模态对话框，但可以通过编程方式实现类似效果。父子窗口间的数据传递可以通过多个途径实现，如 URL 参数、全局变量或通过事件监听。 ### 父子窗口之间的值传递 #### `showModalDialog` 示例 在 `showModalDialog` 中，你可以通过 `dialogArguments` 对象从父窗口向对话框传递数据，然后通过 `window.returnValue` 从对话框返回数据到父窗口： ```javascript // 父窗口 var result = window.showModalDialog('dialog.html', '初始值', 'dialogFeatures'); console.log(result); // 从对话框返回的结果 // 对话框（dialog.html） window.dialogArguments = '从父窗口传递的值'; window.returnValue = '对话框返回的值'; ``` #### `window.open` 示例 对于 `window.open`，你可以使用全局变量、URL 参数或通过 `postMessage` API 实现通信： ```javascript // 父窗口 var newWindow = window.open('child.html', 'child'); newWindow.myData = '从父窗口传递的值'; // 或者通过 URL 参数 var url = 'child.html?data=' + encodeURIComponent('从父窗口传递的值'); var newWindow = window.open(url, 'child'); // 子窗口（child.html） window.onload = function() { console.log(window.myData); // 从父窗口传递的值 // 或者从 URL 参数获取 var data = decodeURIComponent(window.location.search.replace('data=', '')); }; ``` 在现代浏览器中，`postMessage` API 是一种更安全且推荐的通信方式，它允许不同源的窗口之间传递数据： ```javascript // 父窗口 var newWindow = window.open('child.html', 'child'); newWindow.postMessage('从父窗口传递的值', '*'); // 子窗口（child.html） window.addEventListener('message', function(event) { if (event.origin === '预期的父窗口来源') { console.log(event.data); // 从父窗口传递的值 } }, false); ``` ### 总结 `showModalDialog` 和 `window.open` 都提供了在父子窗口之间传递数据的方式，但前者提供了模态对话框体验，而后者则更加灵活。选择哪个方法取决于具体的应用场景和需求。对于跨窗口通信，`postMessage` API 是一个安全且强大的工具，尤其在处理跨域问题时。