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函数库-集合框架
Apr 27 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
JQuery基础语法小结
Feb 27 Javascript
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
javascript闭包的使用之按钮切换功能
Aug 30 Javascript
Angular6新特性之Angular Material
Dec 28 Javascript
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
手把手带你封装一个vue component第三方库
Feb 14 Javascript
Jquery异步上传文件代码实例
Nov 13 jQuery
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 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读取IMAP邮件
2006/10/09 PHP
php面向对象全攻略 (一) 面向对象基础知识
2009/09/30 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
单一index.php实现PHP任意层级文件夹遍历(Zjmainstay原创)
2012/07/31 PHP
javascript 避免闭包引发的问题
2009/03/17 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
js实现点击链接后延迟3秒再跳转的方法
2015/06/05 Javascript
jquery实现用户信息修改验证输入方法汇总
2015/07/18 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
微信小程序中form 表单提交和取值实例详解
2017/04/20 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
微信JS-SDK updateAppMessageShareData安卓不能自定义分享详解
2019/03/29 Javascript
element el-tree组件的动态加载、新增、更新节点的实现
2020/02/27 Javascript
js实现点赞效果
2020/03/16 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
python爬虫入门教程之糗百图片爬虫代码分享
2014/09/02 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
解决Python pandas df 写入excel 出现的问题
2018/07/04 Python
python3实现逐字输出的方法
2019/01/23 Python
Pytoch之torchvision.transforms图像变换实例
2019/12/30 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
基于python实现计算两组数据P值
2020/07/10 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
技术人员面试提纲
2013/11/28 职场文书
销售总监岗位职责
2014/01/04 职场文书
研讨会通知
2015/04/27 职场文书
2015党建工作简报
2015/07/21 职场文书
八年级地理课件资料及考点知识分享
2019/08/30 职场文书
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js
使用python将HTML转换为PDF pdfkit包(wkhtmltopdf) 的使用方法
2022/04/21 Python