模式化窗口问题![window.dialogArguments]

本文解决了一个在火狐浏览器中弹出子窗口时出现的子页面刷新后丢失window.dialogArguments对象的问题,并提供了两种解决方案:一种是将showModalDialog窗口的页面放入frameset或iframe中;另一种是通过修改父页面的隐藏域来传递数据。

前些天做项目时遇到了个浏览器兼容问题,解决后记录一下,也将模式化的资料放上!

详细问题描述:

在火狐浏览器中弹出一个子窗口,子页面中是一个分页,点下一页后子页面会刷新,然后window.dialogArguments对象就丢失了,alert输出显示undefined [解决方法见第三项]

最近做网站的时候需要用到模式化窗口功能,也遇到了一些问题,所以查了查资料以解决

      

1.     弹出窗口几种方法

a.     window.open(pageURL,name,parameters);

b.     window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框(IE 4+支持)

c.     window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框(IE 5+支持)

 

 

2.     显示样式问题:所用到的是window.showModalDialog(),此方法弹出的窗口在IE6下显示比IE7 ,IE8 下高度要小点,所以你可以写个js 解决这点(IE6下高度需要+35PX左右, dialogLeft 属性可以根据屏幕宽度设置)

代码片段如下:

            var swidth=window.screen.width;

            if(parseInt(width)>swidth)

                swidth=100;

            else

                swidth=(swidth-parseInt(width))/2;

        

varwindowStatus="dialogWidth:"+width+"px;dialogHeight:"+height+"px;dialogTop:80px;dialogLeft:"+swidth+"px;center:1;status:no;scroll:no;resizable:no;help:no;";

 

//弹出方法

      if(url.indexOf("?")<0){window.showModalDialog(url+'?setTime='+newDate().getTime(),obj,windowStatus);}

      else{window.showModalDialog(url+'&setTime='+newDate().getTime(),obj,windowStatus);}

             

             

3.     dialogArguments对象FF浏览器中丢失问题 弹出showModalDialog窗口中需要分页显示数据,点击页面中的信息,获取分页数据的ID,传给弹出的父窗口。在IE下运行很正常,但在FireFox 3.0中运行时,如果页面不跳转则可以正常的调用window.dialogArguments,若页面一跳转则会丢失window.dialogArguments的引用

现给出2种解决方法

      

a.     showModalDialog窗口的页面放在frameset或者iframe里面,进行一次包装。

例:

window.showModalDialog("test.aspx");

 

test.aspx 页面内容

<frameset cols="0,*">

<frame src=""/>

<frame src="分页显示数据的页面"/>

</frameset>  

 

页面返回方法变成

    function returnValue(flag)

    {

        var myObj = window.parent.dialogArguments;

        myObj.value = flag;

        window.parent.close();

}      

这样就可以拿到返回的值了

 

 

b.     如果不想多弄出来个页面,可以用下面的方法,此方法可以用到了window.opener.document 对象,此对象IE7IE8貌似都不支持(本人测试过,不知道在你机器上咋样),判断下是什么浏览器,然后给父页面的隐藏域赋值,然后父页面再处理;

 

代码如下:

function returnValue(flag)

    {

        document.getElementById("rValue").value=flag;

        if (window.ActiveXObject)   //IE浏览器  

        {

            var myObj = window.dialogArguments;

            //alert(myObj);

            myObj.value = flag;

            window.close();

         }

         else{

            window.opener.document.getElementById("hid_oilid").value=flag;

            window.opener.document.getElementById("txt_oil").value=flag+"";

            //self.close();

            window.close();

         }  

   }

 

基本所遇到问题均已经解决,关于父页面与子页面传值可以多参阅其他资料

 

 

 

 

DUT - 2011/7/13 整理

转载于:https://www.cnblogs.com/dutdm/archive/2011/08/15/moshihua.html

<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、付费专栏及课程。

余额充值