showModalDialog IE 与 firefox

最新推荐文章于 2017-06-24 20:06:20 发布

原创最新推荐文章于 2017-06-24 20:06:20 发布 · 143 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#IE #Firefox #JavaScript #浏览器 #HTML #ViewUI

javascript 专栏收录该内容

19 篇文章

订阅专栏

本文介绍如何在Internet Explorer和Firefox中创建模态对话框。通过使用不同的方法，如showModalDialog和window.open，可以实现在两种浏览器中弹出模态窗口，并进行必要的窗口间交互。

1.-------------------------

在网页程序中,
有时我们会希望使用者按下按钮后开启一个保持在原窗口前方的子窗口,
而在IE中,我们可以使用 showModalDialog来达成,
语法如下 :

var vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])

范例:

window.showModalDialog("openwin.html","Arguments","dialogHeight: 200px; dialogWidth: 200px; dialogTop: 10px; dialogLeft: 10px;  edge: Raised; center: Yes; help: Yes; resizable: Yes; status: Yes;");

但是.在Firefox中却没有showModalDialog这东西,
而在FireFox中我们只能使用window.open 实现这样的功能,
window.open的语法如下 :

oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

只是,在Firefox下,window.open的参数中,sFeature多了一些功能设定,
而在FireFox下要让开启的窗口跟IE的showModalDialog一样的话,
只要在sFeatures中加个modal=yes就可以了,
范例如下:

window.open('openwin.html','newWin','modal=yes,width=200,height=200,resizable=no,scrollbars=no');

提到了子窗口,不得不提的就是子窗口跟母窗口间的交互操作 ,
因为我想很多人开启对话窗口应该都是为了将操作完的结果丢回去给母窗口...

如果是用showModalDialog的话,
在子窗口中要存取母窗口的函数的话,
要注意两个地方,
1.(母窗口中)开启窗口:

window.showModalDialog("openwin.html",self,'modal=yes,width=775,height=700,resizable=no,scrollbars=no');

在第二个参数(vArguments),改成self.

2.(子窗口中)调用母窗口的函数:

window.dialogArguments.ShowMsg(obj.value);

ShowMsg为母窗口中的函数.

而使用window.open的话,
则是要注意一个地方,
1.(子窗口中)调用母窗口的函数:

window.opener.ShowMsg(obj.value);

使用window.opener去接母窗口的对象.

如此一来,只要再透过navigator.appName去判断浏览器为何,
就可以写一个IE与FireFox兼容的函数...

showModalDialog 中的 retrunValue

父页：

function edit(){ 
      var str = window.showModalDialog("b.action","","dialogWidth:100px;dialogHeight:200px;scroll:yes;status:no"); 
}

子页：

function rs(){
   window.returnValue='要返回的值';
   window.close();
}

2.---------------------------------

从 Firefox 3 开始，支持 showModalDialog，但还不支持 showModelessDialog（注意前面一个是 Modal，后面一个是 Model）。

语法和 IE 中的相同，不过与 IE 中的 showModalDialog 相比，还是有些不同：

dialogWidth 和 dialogHeight

Firefox 中这两个属性的宽度和高度不包括边框和地址栏、状态栏、标题栏。
IE 中是包括的。

窗口大小调节

Firefox 中虽然可以用 JavaScript 为 dialogWidth 和 dialogHeight 指定新的值，但窗口大小并不改变。
IE 中，可以通过 dialogWidth 和 dialogHeight 来改变窗口大小。

未实现的属性

Firefox 中没有实现 dialogHide、edge、status 属性。