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


Posted in Javascript onOctober 30, 2016

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

详细问题描述:

在火狐浏览器中弹出一个子窗口,子页面中是一个分页,点下一页后子页面会刷新,然后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 对象,此对象IE7,IE8貌似都不支持(本人测试过,不知道在你机器上咋样),判断下是什么浏览器,然后给父页面的隐藏域赋值,然后父页面再处理;

代码如下:

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();
 } 
 }

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

Javascript 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Oct 11 Javascript
JavaScript 设计模式 安全沙箱模式
Sep 24 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
Dec 24 Javascript
javascript实现浏览器窗口传递参数的方法
Sep 03 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
javascript实现拖放效果
Dec 16 Javascript
javascript简单比较日期大小的方法
Jan 05 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 #Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 #Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 #Javascript
JS给Array添加是否包含字符串的简单方法
Oct 29 #Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
Oct 29 #Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 #Javascript
RequireJS简易绘图程序开发
Oct 28 #Javascript
You might like
解析mysql 表中的碎片产生原因以及清理
2013/06/22 PHP
php引用传值实例详解学习
2013/11/06 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
始终在屏幕中间显示Div的代码(css+js)
2011/03/10 Javascript
js验证真实姓名与身份证号是否匹配
2015/10/13 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
2016/06/09 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
JavaScript事件用法浅析
2016/10/31 Javascript
JavaScript实现二维坐标点排序效果
2017/07/18 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
JavaScript中遍历的十种方法总结
2020/12/15 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
[02:04]2018DOTA2亚洲邀请赛Secret赛前采访
2018/04/03 DOTA
Python 错误和异常小结
2013/10/09 Python
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
python抓取网页中链接的静态图片
2018/01/29 Python
Windows下的Python 3.6.1的下载与安装图文详解(适合32位和64位)
2018/02/21 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
Python封装原理与实现方法详解
2018/08/28 Python
超全Python图像处理讲解(多模块实现)
2020/04/13 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
大专生的学习自我评价
2013/12/04 职场文书
职员竞岗演讲稿
2014/05/14 职场文书
鼋头渚导游词
2015/02/05 职场文书
2015年教师工作总结范文
2015/03/31 职场文书