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的匿名函数小结
Dec 31 Javascript
JavaScript CSS 修改学习第四章 透明度设置
Feb 19 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
Mar 05 Javascript
JavaScript实现鼠标点击后层展开效果的方法
May 13 Javascript
JavaScript实现图片滑动切换的代码示例分享
Mar 06 Javascript
Vue resource中的GET与POST请求的实例代码
Jul 21 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
微信小程序云开发实现云数据库读写权限
May 17 Javascript
vue实现弹幕功能
Oct 25 Javascript
axios 实现post请求时把对象obj数据转为formdata
Oct 31 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连接mysql是否成功的代码分享
2014/01/24 PHP
PHP小教程之实现链表
2014/06/09 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
php+mysql实现无限级分类
2015/11/11 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
PHP通过get方法获得form表单数据方法总结
2018/09/12 PHP
Yii2.0建立公共方法简单示例
2019/01/29 PHP
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
2013/11/12 Javascript
深入理解JavaScript系列(36):设计模式之中介者模式详解
2015/03/04 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
jQuery数组处理函数整理
2016/08/03 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
Vue.js实现一个漂亮、灵活、可复用的提示组件示例
2017/03/17 Javascript
html中通过JS获取JSON数据并加载的方法
2017/11/30 Javascript
Vue.directive使用注意(小结)
2018/08/31 Javascript
vue-cli安装使用流程步骤详解
2018/11/08 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
2020/08/10 Javascript
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
PyCharm使用之配置SSH Interpreter的方法步骤
2019/12/26 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
什么是Python中的顺序表
2020/06/02 Python
Python pip install之SSL异常处理操作
2020/09/03 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
英国最大的高品质珠宝和手表专家:Goldsmiths
2017/03/11 全球购物
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
美国亚马逊旗下时尚女装网店:SHOPBOP(支持中文)
2020/10/17 全球购物
电厂厂长岗位职责
2014/01/02 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
学生不参加考试检讨书
2015/02/19 职场文书