【问题与解决】showModalDialog is not defined …
2018-09-18 06:39:27来源:博客园 阅读 ()
背景:
showModalDialog 是比较老的方法了,有些浏览器不再支持弹出模态窗口了。
比如说谷歌浏览就不再支持了,有文章说明如下:
Chrome’s Lack of Support for showModalDialog Breaks Some Enterprise Web Apps
弹出窗口代码:
var obj = new Object(); var retval = window.showModalDialog("request.aspx",obj,"dialogWidth=500px;dialogHeight=300px"); if (retval == null) { ... }else { ... }
浏览器报错:
Uncaught TypeError: undefined is not a function
其中有些临时解决办法,但貌似showModalDialog不会回来了。
问题解决
常见的弹出窗口有div模拟或者用window.open代替,对于一个已经在用的系统来说,采用div方式转换成本较高,采用window.open改动会更少一些,但也会丢失其模态性。
这里采用简单的window.open方案,毕竟替换成本低很多。针对上文中提到的showModalDialog使用方式,替换为:
var iWidth = 500; var iHeight = 300; var iTop = (window.screen.availHeight - 30 - iHeight) / 2; var iLeft = (window.screen.availWidth - 10 - iWidth) / 2; var win = window.open("request.aspx", "弹出窗口", "width=" + iWidth + ", height=" + iHeight + ",top=" + iTop + ",left=" + iLeft + ",toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no,alwaysRaised=yes,depended=yes");
参数说明
dialogWidth:对话框宽度。 dialogLeft:距离桌面左的距离。 dialogTop:离桌面上的距离。 center:{yes|no|1|0}:窗口是否居中,默认yes,但仍可以指定高度和宽度。 help:{yes|no|1|0}:是否显示帮助按钮,默认yes。 resizable:{yes|no|1|0}[IE5+]:是否可被改变大小。默认no。 status:{yes|no|1|0}[IE5+]:是否显示状态栏。默认为yes[Modeless]或no[Modal]。 scroll:{yes|no|1|0|on|off}:指明对话框是否显示滚动条。默认为yes。 还有几个属性是用在HTA中的,在一般的网页中一般不使用。
dialogHide:{yes|no|1|0|on|off}:在打印或者打印预览时对话框是否隐藏。默认为no。 edge:{sunken|raised}:指明对话框的边框样式。默认为raised。 unadorned:{yes|no|1|0|on|off}:默认为no。
采用这种方式就可以打开一个和之前使用showModalDialog差不多的窗口。但是怎么返回值呢?
在弹出页面中有两种方式:
1、直接设置父窗口的DOM对象的值。
window.opener.document.getElementById(“parentWindowControlId”).value = "数据";
父窗口中应该有一个id为parentWindowControllId的DOM元素。
2、调用父窗口中的Javascript函数,由父窗口进行相应的处理。
var obj = { id:"id", name:"name" }; window.opener.DoAfterXXX(obj);
父窗口提供一个DoAfterXXX的函数就可以了。
长远来看window.open由于其用户体验问题必将走向没落,还是尽快转移为好。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- 浅析XMLHttpRequest的缓存问题 2020-02-25
- vue-cli中打包图片路径错误的解决方法 2020-01-17
- BootStrap 标题设置跨行无效的解决方法 2020-01-17
- textarea不能通过maxlength属性来限制字数的解决方法 2019-12-21
- js处理php输出时间戳对不上号的解决方法 2019-12-13
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash