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 使用form表单select类实现级联菜单效果
Dec 19 Javascript
下拉菜单点击实现连接跳转功能的js代码
May 19 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
JavaScript中实现异步编程模式的4种方法
Sep 24 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
原生JS上传大文件显示进度条 php上传文件代码
Mar 27 Javascript
JS手写一个自定义Promise操作示例
Mar 16 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
dedecms模版制作使用方法
2007/04/03 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
PHP程序中使用adodb连接不同数据库的代码实例
2015/12/19 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
laravel admin实现分类树/模型树的示例代码
2020/06/10 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
JavaScript 无符号右移运算符
2009/04/17 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
jquery制作多功能轮播图插件
2015/04/02 Javascript
javaScript中push函数用法实例分析
2015/06/08 Javascript
详解JavaScript操作HTML DOM的基本方式
2015/10/21 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
详解获取jq ul第一个li定位的四种解决方案
2016/11/23 Javascript
原生js轮播特效
2017/05/18 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
Python中的异常处理学习笔记
2015/01/28 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
Python中join函数简单代码示例
2018/01/09 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
Python3监控疫情的完整代码
2020/02/20 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
浅析Python 序列化与反序列化
2020/08/05 Python
Canvas与图片压缩的示例代码
2017/11/28 HTML / CSS
个性与发展自我评价
2014/02/11 职场文书
安全先进班组材料
2014/12/26 职场文书
义诊活动总结
2015/02/04 职场文书
综合素质评价自我评价
2015/03/06 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书
Debian11 Xfce终端光标的颜色怎么设置?
2022/08/14 数码科技