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控制表单操作的常用代码小结
Aug 15 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
May 28 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
javascript中异常处理案例(推荐)
Oct 03 Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 Javascript
基于postman获取动态数据过程详解
Sep 08 Javascript
vue 授权获取微信openId操作
Nov 13 Javascript
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
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
玛琪朵 Macchiato
2021/03/03 咖啡文化
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
php过滤敏感词的示例
2014/03/31 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
javascript复制对象使用说明
2011/06/28 Javascript
基于JQuery实现的类似购物商城的购物车
2011/12/06 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
Css3制作变形与动画效果
2015/07/24 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
2018/06/19 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
从0搭建vue-cli4脚手架
2020/06/17 Javascript
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
python多线程抽象编程模型详解
2019/03/20 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
python文件读取失败怎么处理
2020/06/23 Python
HTML5的结构和语义(5):交互
2008/10/17 HTML / CSS
美国最大的袜子制造商和零售商:Renfro Socks
2017/09/03 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
平面设计岗位职责
2013/12/14 职场文书
客服服务心得体会
2013/12/30 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
介绍信如何写
2015/01/31 职场文书
飞越疯人院观后感
2015/06/09 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
前端JavaScript大管家 package.json
2021/11/02 Javascript
Python字符串格式化方式
2022/04/07 Python