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动态向网页中添加表格实现代码
Feb 19 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
jquery插件ajaxupload实现文件上传操作
Dec 09 Javascript
实现高性能JavaScript之执行与加载
Jan 30 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
Dec 23 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
js实现简单的无缝轮播效果
Sep 05 Javascript
JS如何操作DOM基于表格动态展示数据
Oct 15 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
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
jQuery库与其他JS库冲突的解决办法
2010/02/07 Javascript
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
轻松创建nodejs服务器(3):代码模块化
2014/12/18 NodeJs
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
基于jQuery的表单填充实例
2017/08/22 jQuery
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
Node.js 中判断一个文件是否存在
2020/08/24 Javascript
[01:14:34]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第一局
2016/02/28 DOTA
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python ljust rjust center输出
2008/09/06 Python
python 简易计算器程序,代码就几行
2009/08/29 Python
python实现数通设备端口监控示例
2014/04/02 Python
Python异常处理总结
2014/08/15 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
简单讲解Python中的闭包
2015/08/11 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
Django2.1集成xadmin管理后台所遇到的错误集锦(填坑)
2018/12/20 Python
Python利用heapq实现一个优先级队列的方法
2019/02/03 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
pandas中ix的使用详细讲解
2020/03/09 Python
应届生求职信写作技巧
2013/10/24 职场文书
劳动模范事迹材料
2014/01/19 职场文书
如何写一份好的英文求职信
2014/03/19 职场文书
标准版离职证明书
2014/09/12 职场文书
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
周末问候语大全
2015/11/10 职场文书
高中化学教学反思
2016/02/22 职场文书
python数字转对应中文的方法总结
2021/08/02 Python