window.open和window.showModalDialog区别

 window.open和window.showModalDialog区别：

1.都是在IE上打开新窗口，只不过前者是非阻塞式，也可以说非模态窗口。而后者是阻塞式模态窗口。阻塞或者模态窗口，只有你把当前窗口关闭后，才能去操作父亲窗口。

2.参数上:

oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])打开新窗口并装入给定 URL 的文档。
返回值：返回打开的新窗口对象
sURL:可选参数，要打开新窗口的地址url.
sName:可选参数，新窗口的句柄名，常用的四种有：_blank,_parent,_top,_self.
sFeatures:可选参数，IE窗口相关的特性，有height,width,left.top,location,menubar,resizable,scrollbars,status,titlebar,toolbar,还有channelmode，directories和fullscreen(全屏模态)特殊参数.
sReplace:可选参数
example:window.open("Sample.htm",null,"height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");

 

 window.showModalDialog()创建一个显示指定 HTML 文档的模式对话框。

 

vReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
sURL:可选参数，要打开新窗口的地址url.
vArguments:可选参数,可用来向子窗口传递参数.用来向对话框传递参数。传递的参数类型不限，包括数组等。对话框通过window.dialogArguments来取得传递进来的参数。 这个参数隐藏掉，不用放在url里，提高了安全性。
sFeatures：可选参数，dialogHeight,dialogWidth,dailogLeft,dialogTop,center,dialogHide,edge,help,resizable,scroll,status,unadorned.

参数传递： 
1.要想对话框传递参数，是通过vArguments来进行传递的。类型不限制，对于字符串类型，最大为4096个字符。也可以传递对象，例如： 
------------------------------- 
parent.htm 
<script> 
var obj = new Object(); 
obj.name="51js"; 
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px"); 
</script> 
modal.htm 
<script> 
var obj = window.dialogArguments 
alert("您传递的参数为：" + obj.name) 
</script> 
------------------------------- 
2.可以通过window.returnValue向打开对话框的窗口返回信息，当然也可以是对象。例如： 
------------------------------ 
parent.htm 
<script> 
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px"); 
alert(str); 
</script> 
modal.htm 
<script> 
window.returnValue="http://www.web3.cn"; 
</script>

3.传参安全性:
1)window.open(),通过创建form提交，以post提交，参数传参安全了。如下：
function openPostWindow(url, data, name) 
{ 
var tempForm = document.createElement("form"); 
tempForm.id="tempForm1"; 
tempForm.method="post"; 
tempForm.action=url; 
tempForm.target=name; 
var hideInput = document.createElement("input"); 
hideInput.type="hidden"; 
hideInput.name= "content" 
hideInput.value= data; 
tempForm.appendChild(hideInput); 
tempForm.attachEvent("onsubmit",function(){ openWindow(name); }); 
document.body.appendChild(tempForm); 
tempForm.fireEvent("onsubmit"); 
tempForm.submit(); 
document.body.removeChild(tempForm); 
} 
function openWindow(name) 
{ 
window.open('about:blank',name,'height=400, width=400, top=0, left=0, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=yes, status=yes'); 
}
2).window.showModalDialog传参安全，通过第二个参数vArguments传递参数，然后在子页面中，再用window.dialogArguments获传递的参数.
.

评论

1 楼 yangboyun 2017-06-22