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 10 Javascript
用jquery实现的模拟QQ邮箱里的收件人选取及其他效果(一)
Jan 06 Javascript
JavaScript sub方法入门实例(把字符串显示为下标)
Oct 17 Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
vue滚动插件better-scroll使用详解
Oct 18 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 Javascript
iview实现图片上传功能
Jun 29 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出错界面
2006/10/09 PHP
php连接mssql数据库的几种方法
2013/02/21 PHP
PHP容易忘记的知识点分享
2013/04/30 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
2011/02/23 Javascript
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
实例解析jQuery插件EasyUI最常用的表单验证规则
2015/11/29 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
javascript仿京东导航左侧分类导航下拉菜单效果
2020/11/25 Javascript
json的使用小结
2016/06/08 Javascript
JS实现最简单的冒泡排序算法
2017/02/15 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
2019/03/06 Javascript
Vue中的验证登录状态的实现方法
2019/03/09 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
python爬取网站数据保存使用的方法
2013/11/20 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
itchat-python搭建微信机器人(附示例)
2019/06/11 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
python怎么自定义捕获错误
2020/06/29 Python
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
揭牌仪式策划方案
2014/05/28 职场文书
社区党建工作汇报材料
2014/08/14 职场文书
公司授权委托书格式范文
2014/10/02 职场文书
于丹论语心得观后感
2015/06/15 职场文书
工程进度款催款函
2015/06/24 职场文书
讲座新闻稿
2015/07/18 职场文书
python turtle绘制多边形和跳跃和改变速度特效
2022/03/16 Python
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server