window.dialogArguments

本文详细介绍了如何在网页中使用window.showModalDialog()函数弹出模式对话框,并通过window.dialogArguments参数引用父窗口对象,实现子窗口与父窗口之间的交互。包括实例演示了在子窗口关闭时刷新父窗口,以及调用父窗口中的函数等操作。
弹出子窗口
window.showModalDialog( url, window ); 

然后在弹出的子窗口中: 
window.dialogArguments 即为父窗口window对象的引用。想搞什么都可以了。

看楼主的意思子窗口应该是用window.showModalDialog()弹出的模式对话框.
父窗口中弹出时这么写:window.showModalDialog('子窗口.aspx',window,'....');
注意第二个参数用window,这样你就把父窗口对象当做参数传递给了子窗口.
然后在子窗口中就可以通过window.dialogArguments来引用父窗口对象了.
就向楼上说的,你想怎么搞都行了...
举个例子,你可以在子窗体关闭的时候刷新父窗体,可以这么写:
window.dialogArguments.location.href=window.dialogArguments.location.href;
window.focus();
window.close();
你也可以调用主窗口里的函数:
window.dialogArguments.函数名();

例:
function pageLoad() {
            var datas = window.dialogArguments;
            var grid = $find("PartMaterialInfosGrid");
            var list = new Array();
            $.each(datas, function (i, item) {
                var object = grid._createNewDataObj();
                object.ActualNumber = item.ActualNumber;
                object.Code = item.Code;
                object.ContractCode = item.ContractCode;
                object.ContractName = item.ContractName;
                object.MaintenanceEndTime = new Date(item.MaintenanceEndTime);
                object.Number = item.Number;
                object.OriginalSupplierCode = item.OriginalSupplierCode;
                object.OriginalSupplierName = item.OriginalSupplierName;
                object.PartMaterialCode = item.PartMaterialCode;
                object.PartMaterialName = item.PartMaterialName;
                object.SpaceLayoutCode = item.SpaceLayoutCode;
                object.SpaceLayoutName = item.SpaceLayoutName;
                object.Specifications = item.Specifications;
                object.SupplierCode = item.SupplierCode;
                object.SupplierName = item.SupplierName;
                object.UnitMeasurement = item.UnitMeasurement;
                object.UnitPrice = item.UnitPrice;
                list.push(object);
            });
            grid.set_dataSource(list);
        }
<think>好的,我现在需要帮助用户解决在现代浏览器中替代或实现`window.dialogArguments`功能的问题。用户之前提供的引用内容主要讨论了`window.dialogArguments`的兼容性问题以及一些替代方法,比如使用`window.open`或者`window.showModalDialog`的替代方案。不过这些方法可能已经过时或者存在兼容性问题,尤其是在现代浏览器中,比如Chrome已经不再支持`window.showModalDialog`。 首先,我需要确认用户的需求。用户希望找到`window.dialogArguments`的替代方案,因为该属性主要与IE的模态对话框相关,而现代浏览器可能不再支持。因此,我需要考虑现代浏览器支持的跨浏览器方法来实现类似的功能,即传递参数到对话框并在关闭后返回结果。 接下来,回顾提供的引用内容,其中提到使用`window.open`作为替代方案,但指出存在bug。引用5中的代码示例尝试通过`window.open`来模拟模态对话框,但需要注意`window.open`是非阻塞的,而`window.showModalDialog`是阻塞的,这可能导致代码执行顺序的问题。因此,可能需要使用回调函数或者Promise来处理异步操作。 另一个可能的替代方案是使用HTML5的`<dialog>`元素,这在现代浏览器中得到支持。`<dialog>`元素可以创建模态对话框,并且可以通过JavaScript传递参数和接收返回值。同时,结合`postMessage`API或者直接在DOM中操作数据,可能实现参数的传递。 另外,引用3和4提到了`window.showModalDialog`的过时以及使用`window.open`的临时解决方案。但用户需要更现代的方法,可能需要结合前端框架或库,比如React或Vue的模态组件,这些组件通常提供了更灵活的数据传递和事件处理机制。 还需要考虑如何保持父子窗口之间的通信。使用`window.opener`属性可以让子窗口访问父窗口的引用,从而直接调用父窗口的函数或修改父窗口的数据。例如,在子窗口中可以通过`window.opener.postMessage`发送消息,父窗口监听`message`事件来处理返回的数据。 总结可能的解决方案: 1. 使用HTML5 `<dialog>`元素,结合自定义属性和事件传递参数。 2. 使用`window.open`并利用`postMessage`进行跨窗口通信。 3. 使用前端框架的模态组件,通过props或状态管理传递数据。 4. 使用Promise和事件监听器模拟阻塞行为,处理异步返回值。 需要验证这些方法的可行性,并考虑兼容性问题。例如,`<dialog>`的兼容性可能需要polyfill支持旧版浏览器,而`postMessage`是广泛支持的。同时,确保代码结构清晰,避免出现引用中的bug,比如正确处理窗口关闭事件和内存泄漏问题。 最后,整理步骤,给出具体的代码示例,并比较不同方法的优缺点,帮助用户选择最适合其项目需求的方案。</think>### 逐步解答 #### 一、理解`window.dialogArguments`的作用 `window.dialogArguments`主要用于IE浏览器中模态对话框(通过`window.showModalDialog`创建)的参数传递。父窗口通过该属性向子对话框传递数据,子对话框通过`window.returnValue`返回结果[^3]。但现代浏览器(Chrome/Firefox/Edge)已弃用`window.showModalDialog`,因此需替代方案。 --- #### 二、现代浏览器替代方案 ##### 方案1:使用`window.postMessage` + `window.open` 通过跨窗口通信实现参数传递和结果返回。 ```javascript // 父窗口 const childWindow = window.open('dialog.html'); // 传递参数 childWindow.postMessage({ action: 'init', data: { userId: 123 } }, '*'); // 监听子窗口返回结果 window.addEventListener('message', (event) => { if (event.data.action === 'submit') { console.log('Received data:', event.data.result); } }); // 子窗口(dialog.html) window.addEventListener('message', (event) => { if (event.data.action === 'init') { const params = event.data.data; // 获取参数 // 处理逻辑... // 返回结果 window.opener.postMessage({ action: 'submit', result: { status: 'success' } }, '*'); } }); ``` **优点**:兼容所有现代浏览器,支持异步通信[^3][^5]。 --- ##### 方案2:使用HTML5 `<dialog>`元素 通过原生模态框组件实现数据绑定。 ```html <!-- 父窗口 --> <dialog id="myDialog"> <form method="dialog"> <input type="text" id="dialogInput"> <button type="submit">确认</button> </form> </dialog> <script> const dialog = document.getElementById('myDialog'); // 打开对话框并传递参数 function openDialog(params) { document.getElementById('dialogInput').value = params.initialValue; dialog.showModal(); } // 监听对话框关闭 dialog.addEventListener('close', () => { const result = document.getElementById('dialogInput').value; console.log('Result:', result); }); </script> ``` **优点**:无需额外窗口,直接操作DOM,支持`Promise`交互[^3]。 --- ##### 方案3:基于Promise的封装 模拟阻塞式对话框行为。 ```javascript // 父窗口 async function openDialog(url, params) { return new Promise((resolve) => { const child = window.open(url, '_blank', 'width=600,height=400'); // 传递参数 child.dialogParams = params; // 监听子窗口关闭 const timer = setInterval(() => { if (child.closed) { clearInterval(timer); resolve(child.returnValue); } }, 100); }); } // 子窗口 window.onload = () => { const params = window.opener.dialogParams; // 获取参数 // 处理逻辑... window.returnValue = { result: 'data' }; // 设置返回值 }; ``` **注意**:需处理跨域限制和`window.opener`的安全策略[^2][^4]。 --- #### 三、方案对比 | 方案 | 兼容性 | 复杂度 | 交互方式 | 适用场景 | |--------------|-----------------|--------|----------------|------------------------| | postMessage | 所有现代浏览器 | 中 | 异步通信 | 复杂数据交互 | | `<dialog>` | 需Polyfill | 低 | 同步/异步 | 简单表单操作 | | Promise封装 | 所有浏览器 | 高 | 模拟阻塞 | 需保留旧代码逻辑 | --- #### 四、推荐实践 1. **简单场景**:优先使用HTML5 `<dialog>`,代码简洁且无跨窗口问题。 2. **复杂交互**:选择`postMessage` + `window.open`,确保数据安全性和灵活性。 3. **兼容旧系统**:采用Promise封装模拟阻塞行为,但需注意安全限制[^4][^5]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值