高版本chrome不再支持window.showmodaldialog 的临时替换方案【用window.open】
接管别人的项目,因开发时用了showmodaldialog 导致最近很多用户chrome升级到最新之后 就无法弹窗了。原因是新版chrome[37+]不再支持showmodaldialog。
showmodaldialog 并不是W3C标准内的方法,起源于IE, 当是低版本的firefox也是不支持的,后来不知怎么了又纳入了这个方法。貌似opera和safari都不支持。随着web标准的日益规范化,估计Firefox 和 IE都不会再支持它了。所以建议经常使用它做数据交互的同学可以抛弃它了,改用js和div封装的弹窗组件吧。
下面我贴出我解决此问题的方法。
因为我这个项目是嵌套很多iframe的。弹窗口会有数据回传。弹窗之上又有弹窗也会有值回传。3级或者更多。所以我把兼容的js代码写在一个文件,所有涉及弹窗口的页面均调用这个脚本文件:
common.js
- var has_showModalDialog = !!window.showModalDialog;//定义一个全局变量判定是否有原生showModalDialog方法
- if(!has_showModalDialog &&!!(window.opener)){
- window.onbeforeunload=function(){
- window.opener.hasOpenWindow = false; //弹窗关闭时告诉opener:它子窗口已经关闭
- }
- }
- //定义window.showModalDialog如果它不存在
- if(window.showModalDialog == undefined){
- window.showModalDialog = function(url,mixedVar,features){
- if(window.hasOpenWindow){
- alert("您已经打开了一个窗口!请先处理它");//避免多次点击会弹出多个窗口
- window.myNewWindow.focus();
- }
- window.hasOpenWindow = true;
- if(mixedVar) var mixedVar = mixedVar;
- //因window.showmodaldialog 与 window.open 参数不一样,所以封装的时候用正则去格式化一下参数
- if(features) var features = features.replace(/(dialog)|(px)/ig,"").replace(/;/g,',').replace(/\:/g,"=");
- //window.open("Sample.htm",null,"height=200,width=400,status=yes,toolbar=no,menubar=no");
- //window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px");
- var left = (window.screen.width - parseInt(features.match(/width[\s]*=[\s]*([\d]+)/i)[1]))/2;
- var top = (window.screen.height - parseInt(features.match(/height[\s]*=[\s]*([\d]+)/i)[1]))/2;
- window.myNewWindow = window.open(url,"_blank",features);
- }
- }
执行弹出的当前页的方法用例:(有返回值)
- function selectHotel(){
- url = 'hotel/listHotelForChoose.action';
- var hotelIdList = window.showModalDialog(url, "hotel", "dialogWidth:1020px;dialogHeight:500px;help:no;resizable:no;center:yes;scroll:yes;status:no");
- if(!has_showModalDialog) return;//chrome 返回 因为showModalDialog是阻塞的 open不一样;
- $("#content").append(hotelIdList);
- }
- function selectHotelChrome(option){//为打开的窗口定义方法,让打开的窗口关闭时通过window.opener赋值回来并执行
- $("#content").append(option);
- }
子窗口这样调用:
- function chooseHotels() {
- /*
- *省略了自己的业务.......
- */
- if (window.opener != undefined) { //forchrome
- window.opener.selectHotelChrome(contentIds); //关闭前调用父窗口方法
- }
- else {
- window.returnValue = contentIds;
- }
- window.close();
- }
高版本chrome不再支持window.showmodaldialog 的临时替换方案【用window.open】的更多相关文章
- 高版本Chrome不支持showModalDialog
高版本Chrome不支持window.showModalDialog,可用window.open代替 var url = "https://www.baidu.com"; var ...
- 谷歌浏览器Chrome不再支持showModalDialog的解决办法
问题重现 弹出窗口编码: JavaScript 0 1 2 3 4 5 6 7 var obj = new Object(); var retval = window.showModalDia ...
- NodeJS较高版本对connect支持的问题
在nodejs中引入connect后,构建应用的代码如下 var connect = require('connect'); var server = connect.createServer(); ...
- jQuery2.0.0版本以后不再支持ie8的原因
在引用jQuery时,引用高版本的Jq会在IE8下报错,在网上查了一下,jq在2.0+的版本就已经放弃对ie8的支持了.之前没有仔细研究过jq版本,借此机会去看了一下jq版本的知识.一.如何查看jq的 ...
- idea maven package报错"不再支持源选项 5 请使用 6 或更高版本。不支持发行版本 5"
解决办法: 1.确保java compile以及project和module的java字节码版本是所用的java版本:
- 解决jquery mobile的遇到高版本Chrome一直转圈,页面加载不出来的情况。
把这么一段代码,加到jquery.mobile.js中后问题解决了. $(document).on('mobileinit',function(){ $.mobile.changePage.defau ...
- ie高版本浏览器不支持velocity的问题解决
<head><meta http-equiv="X-UA-Compatible" content="IE=5"></head> ...
- window.showModalDialog与window.open()使用
window.showModalDialog 有些浏览器不兼容,尝试用window.open() 封装替代,需要打开子窗口后向父窗口传递数据. <html> <script src= ...
- 在Chrome、Firefox等高版本浏览器中实现低延迟播放海康、大华RTSP
一.背景 现在到处是摄像头的时代,随着带宽的不断提速和智能手机的普及催生出火热的网络直播行业,新冠病毒的大流行又使网络视频会议系统成为商务会议的必然选择,因此RTSP实时视频流播放及处理不再局限于安防 ...
随机推荐
- xwiki安装部署
环境介绍 http://aiushtha-mybook.stor.sinaapp.com/xwiki/xwiki%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E8%BF%9 ...
- [BZOJ2987]Earthquake:类欧几里得算法
分析 类欧的式子到底是谁推的啊怎么这么神仙啊orz! 简单说一下这道题,题目中的约束条件可以转化为: \[ y \leq \frac{c-ax}{b} \] 有负数怎么办啊?转化一下: \[ y \l ...
- 【错误记录】Python 负数取余问题
print(-123%10) # 输出 7 print(-123%-10) # 输出 -3 这里面第二条是我们一般意义上的取余操作.这里也特别标注一下,如果涉及到负数取余要用上述解决办法. ...
- [CSP-S模拟测试]:最大异或和(数学)
题目传送门(内部题81) 输入格式 第一行一个整数$T(T\leqslant 20)$,表示测试数据组数 接下来$T$组,对于每一组,第一行一个整数$n$ 第二行有$n$个整数,为$w_1,w_2.. ...
- 大数据笔记(二十四)——Scala面向对象编程实例
===================== Scala语言的面向对象编程 ======================== 一.面向对象的基本概念:把数据和操作数据的方法放到一起,作为一个整体(类 c ...
- spring cloud:config-eureka-refresh-bus-rabbitmq
config-server-eureka-bus-rabbitmq 1. File-->new spring starter project 2.add dependency <paren ...
- 每日踩坑 2019-07-30 H5 使用 iframe 底部有白边
用个iframe累死累活的 用 js 动态计算高度, 结果明明px都对,然后却把页面滚动条也整出来了. 查看元素盒模型也一切正常. 然后仔细观察就发现是下边多了几个像素的白色边. 然后就 百度呗 以下 ...
- Make jQuery throw error when it doesn't match an element
Make jQuery throw error when it doesn't match an element 解答1 You could make a plugin to use to ensur ...
- git && github 相关
权限问题(error: The requested URL returned error: 403 Forbidden while accessing):1. 将自己机器的ssh public key ...
- SpringMVC中mvc:view-controller的使用
1.重定向 <mvc:view-controller path="/" view-name="redirect:/admin/index"/> 即如 ...