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 相关文章推荐
js以对象为索引的关联数组
Jul 04 Javascript
js给onclick事件赋值,动态传参数实例解说
Mar 28 Javascript
javascript 常见功能汇总
Jun 11 Javascript
AngularJS学习笔记之基本指令(init、repeat)
Jun 16 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
Mar 09 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
JavaScript之数组扁平化详解
Jun 03 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
JavaScript 定时器详情
Nov 11 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输出Excel文件类
2010/02/08 PHP
PHP程序开发范例学习之表单 获取文本框的值
2011/08/08 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
仿jQuery的siblings效果的js代码
2011/08/09 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
js兼容的placeholder属性详解
2013/08/18 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
js实现的tab标签切换效果代码分享
2015/08/25 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
2016/08/27 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
Angular 4 指令快速入门教程
2017/06/07 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
python实现的用于搜索文件并进行内容替换的类实例
2015/06/28 Python
Java及python正则表达式详解
2017/12/27 Python
Python collections模块使用方法详解
2019/08/28 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
给客户的道歉信
2014/01/13 职场文书
股东合作协议书
2014/04/14 职场文书
大学生党校培训心得体会
2014/09/11 职场文书
财务统计员岗位职责
2015/04/14 职场文书
培训通知书模板
2015/04/17 职场文书
《别在吃苦的年纪选择安逸》读后感3篇
2019/11/30 职场文书
golang实现一个简单的websocket聊天室功能
2021/10/05 Golang
flex布局中使用flex-wrap实现换行的项目实践
2022/06/21 HTML / CSS