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聚焦于第一个字段的代码
Oct 15 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
用jquery写的一个万年历(自写)
Jan 20 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
使用jQuery判断IE浏览器版本的代码
Jun 14 Javascript
javascript操作数组详解
Dec 17 Javascript
javascript实现任务栏消息提示的简单实例
May 31 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
Vuex 入门教程
Jan 10 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
PHP个人网站架设连环讲(三)
2006/10/09 PHP
PHP中的cookie不用刷新就生效的方法
2012/02/04 PHP
关于PHP递归算法和应用方法介绍
2013/04/15 PHP
php利用array_search与array_column实现二维数组查找
2019/07/08 PHP
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
javascript图片预览和上传(兼容IE)
2017/03/15 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
React学习笔记之条件渲染(一)
2017/07/02 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
NodeJs form-data格式传输文件的方法
2017/12/13 NodeJs
three.js 实现露珠滴落动画效果的示例代码
2021/03/01 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
python字典操作实例详解
2017/11/16 Python
Python读csv文件去掉一列后再写入新的文件实例
2017/12/28 Python
python调用摄像头拍摄数据集
2019/06/01 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
python批量修改xml属性的实现方式
2020/03/05 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
英国最大的在线蜡烛商店:Candles Direct
2019/03/26 全球购物
夜大毕业生自我评价分享
2013/11/10 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
教师年度考核评语
2014/04/28 职场文书
体现团队精神的口号
2014/06/06 职场文书
2015年副班长工作总结
2015/05/15 职场文书
2016年中学植树节活动总结
2016/03/16 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers