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 30 Javascript
jquery使用淘宝接口跨域查询手机号码归属地实例
Nov 28 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
Jun 05 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
基于Angularjs实现分页功能
May 30 Javascript
详解AngularJS中ng-src指令的使用
Sep 07 Javascript
JavaScript队列函数和异步执行详解
Jun 19 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
Angular中使用ng-zorro图标库部分图标不能正常显示问题
Apr 22 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简单静态页生成过程
2008/03/27 PHP
php删除数组指定元素实现代码
2017/05/03 PHP
laravel实现Auth认证,登录、注册后的页面回跳方法
2019/09/30 PHP
JS 文件本身编码转换 图文教程
2009/10/12 Javascript
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
2016/05/04 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
jQuery实现select模糊查询(反射机制)
2017/01/14 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
vue中SPA单页面应用程序详解
2017/11/07 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
koa socket即时通讯的示例代码
2018/09/07 Javascript
Element Breadcrumb 面包屑的使用方法
2020/07/26 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
python之PyMongo使用总结
2017/05/26 Python
python删除过期log文件操作实例解析
2018/01/31 Python
Python实现爬虫从网络上下载文档的实例代码
2018/06/13 Python
对numpy中的transpose和swapaxes函数详解
2018/08/02 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
python2使用bs4爬取腾讯社招过程解析
2019/08/14 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
Django 自动生成api接口文档教程
2019/11/19 Python
基于python修改srt字幕的时间轴
2020/02/03 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
省优秀教师事迹材料
2014/01/30 职场文书
初中考试作弊检讨书
2014/02/01 职场文书
乡镇三项教育实施方案
2014/03/30 职场文书
光学与应用专业毕业生求职信
2014/09/01 职场文书
vue实现列表垂直无缝滚动
2022/04/08 Vue.js