当前位置: 移动技术网 > IT编程>开发语言>JavaScript > 【问题与解决】showModalDialog is not defined 的解决方案

【问题与解决】showModalDialog is not defined 的解决方案

2018年09月14日  | 移动技术网IT编程  | 我要评论

背景:

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由于其用户体验问题必将走向没落,还是尽快转移为好。

 

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网