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拓展String方法小结
Jul 08 Javascript
js实现两个值相加alert出来精确到指定位
Sep 25 Javascript
js中精确计算加法和减法示例
Mar 28 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
javascript事件委托的方式绑定详解
Jun 10 Javascript
使用jQuery判断浏览器滚动条位置的方法
May 30 Javascript
javascript中json基础知识详解
Jan 19 Javascript
JavaScript 上传文件(psd,压缩包等),图片,视频的实现方法
Jun 19 Javascript
JS高级技巧(简洁版)
Jul 29 Javascript
Vue安装浏览器开发工具的步骤详解
May 12 Javascript
js实现转动骰子模型
Oct 24 Javascript
js实现全选和全不选
Jul 28 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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
php Http_Template_IT类库进行模板替换
2009/03/19 PHP
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
php函数之子字符串替换&amp;#65279; str_replace
2011/03/23 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
js 颜色选择器(兼容firefox)
2009/03/05 Javascript
javascript学习笔记(十二) RegExp类型介绍
2012/06/20 Javascript
Javascript中的异步编程规范Promises/A详细介绍
2014/06/06 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
BootStrap selectpicker
2016/06/20 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
详解.vue文件中监听input输入事件(oninput)
2017/09/19 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
JavaScript数据结构与算法之队列原理与用法实例详解
2017/11/22 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
Vue 子组件与数据传递问题及注意事项
2019/07/11 Javascript
Jquery异步上传文件代码实例
2019/11/13 jQuery
vue-cli4.0多环境配置变量与模式详解
2020/12/30 Vue.js
Python正则表达式常用函数总结
2017/06/24 Python
Python中import机制详解
2017/11/14 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
Java里面如何创建一个内部类的实例
2015/01/19 面试题
九年级家长会邀请函
2014/01/15 职场文书
2015年办公室文员工作总结
2015/04/24 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
合作合同协议书
2016/03/21 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
Python 批量下载阴阳师网站壁纸
2021/05/19 Python
JS实现简单九宫格抽奖
2022/06/28 Javascript