window.showModalDialog 和 window.open的区别以及用法

本文主要是介绍window.showModalDialog 和 window.open的区别以及用法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、window.showModalDialog获取弹出页面返回值的2种方法

----main.html---------主页面

<form name="form1">
<input type="text" name="fag1">
<input type="text" name="fag2">
</form>

function shw(){
var url="open.html";
//----------方法一--start-------
var obj=document.form1; //指定页面对象
var returnValue=window.showModalDialog(url ,obj,'dialogHeight:550px;dialogWidth:500px;center:yes'); //方法返回值
//----------方法一--end-------
alert(returnValue);
}
<form name="form1">
<input type="text" name="fag1">
<input type="text" name="fag2">
</form>

function shw(){
var url="open.html";
//----------方法一--start-------
var obj=document.form1; //指定页面对象
var returnValue=window.showModalDialog(url ,obj,'dialogHeight:550px;dialogWidth:500px;center:yes'); //方法返回值
//----------方法一--end-------
alert(returnValue);
}

----open.html---------弹出页面

<input type="text" name="SNO">
<input type="text" name="TNO">
<input type="button" value="ok" οnclick="retrunValue()">

function retrunValue(){
var TNO=document.all.TNO.value;
var SNO=document.all.SNO.value;

//----------方法二--start-------
var obj = window.dialogArguments; //父页面对象
obj.elements["fag1"].value = SNO; //给父页面对象赋值
obj.elements["fag2"].value = TNO;
//----------方法二--end-------

//----------方法一--start-------
window.returnValue=SNO+","+TNO; //方法返回值
//----------方法一--end-------
window.close();
}
<input type="text" name="SNO">
<input type="text" name="TNO">
<input type="button" value="ok" οnclick="retrunValue()">

function retrunValue(){
var TNO=document.all.TNO.value;
var SNO=document.all.SNO.value;

//----------方法二--start-------
var obj = window.dialogArguments; //父页面对象
obj.elements["fag1"].value = SNO; //给父页面对象赋值
obj.elements["fag2"].value = TNO;
//----------方法二--end-------

//----------方法一--start-------
window.returnValue=SNO+","+TNO; //方法返回值
//----------方法一--end-------
window.close();
}

二、window.open获取返回值方法

----main.html---------主页面

<script type="text/javascript">
//弹出窗口
function openwin(url,width,height){
    var l=window.screen.width ;
    var w= window.screen.height;
    var al=(l-width)/2;
    var aw=(w-height)/2;
    var OpenWindow=window.open(url,"弹出窗口","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width="+width+",height="+height+",top="+aw+",left="+al+"");
    OpenWindow.focus();
if(OpenWindow!=null){ //弹出窗口关闭事件
if(window.attachEvent) OpenWindow.attachEvent("onbeforeunload",   quickOut);
if(window.attachEvent) OpenWindow.attachEvent("onunload",   quickOut);
}
}
//关闭触发方法
function quickOut()
{
alert("窗口已关闭");
}
</script>
<input type="button" value="ok" οnclick="openwin('open.html','600','500')">
<input type="text" name="txt0" id="txt0"> 注意：firefox这里一定要写ID属性，不然取不到值
<script type="text/javascript">
//弹出窗口
function openwin(url,width,height){
var l=window.screen.width ;
var w= window.screen.height;
var al=(l-width)/2;
var aw=(w-height)/2;
var OpenWindow=window.open(url,"弹出窗口","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width="+width+",height="+height+",top="+aw+",left="+al+"");
OpenWindow.focus();
if(OpenWindow!=null){ //弹出窗口关闭事件
if(window.attachEvent) OpenWindow.attachEvent("onbeforeunload",   quickOut);
if(window.attachEvent) OpenWindow.attachEvent("onunload",   quickOut);
}
}
//关闭触发方法
function quickOut()
{
alert("窗口已关闭");
}
</script>
<input type="button" value="ok" οnclick="openwin('open.html','600','500')">
<input type="text" name="txt0" id="txt0"> 注意：firefox这里一定要写ID属性，不然取不到值

----open.html---------弹出页面

<script type="text/javascript"><!--
function foo()
{
window.close();
window.opener.document.getElementById("txt0").value=document.getElementById("txt").value
}
<script>
<input type=text name="txt" id="txt">
<input type=button value="关闭" οnclick="foo();">
<script type="text/javascript"><!--
function foo()
{
window.close();
window.opener.document.getElementById("txt0").value=document.getElementById("txt").value
}
<script>
<input type=text name="txt" id="txt">
<input type=button value="关闭" οnclick="foo();">

三、window.open 弹出新窗口的页面参数设置

'open.html' 弹出窗口的文件名，无指定值，则about:blank的新窗口会被显示；
'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空''代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

详细例子：

<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
//弹出居中窗口
function openwin(url,width,height){
    var l=window.screen.width ;
    var w= window.screen.height;
    var al=(l-width)/2;
    var aw=(w-height)/2;
    var OpenWindow=window.open(url,"弹出窗口","toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width="+width+",height="+height+",top="+aw+",left="+al+"");
    //OpenWindow.document.write("<TITLE>例子</TITLE>" );
    //OpenWindow.document.write("<BODY BGCOLOR=#ffffff>" );
    //OpenWindow.document.write("<h1>Hello!</h1>" );
    //OpenWindow.document.write("New window opened!" );
    //OpenWindow.document.write("</BODY>" );
    //OpenWindow.document.write("</HTML>" );
    OpenWindow.document.close();
    OpenWindow.focus();
}
</head>
<body>
<a href="#" mce_href="#" οnclick="openwin('','600','500')">打开一个窗口</a>
<input type="button" οnclick="openwin('','600','500')" value="打开窗口">
</body>
</html>