1.window.open()
在父窗口中调用window.open()方法来打开子窗口;
在子窗口中使用window.opener来与父窗口进行数据交互。
示例代码:
主窗口html
<div id="popup_1" align="center"><hr> <fieldset><legend>window.open()</legend> <p><label for="name_1">名字:</label> <input type="text" name="name_1"></p> <p><label for="age_1">年龄:</label> <input type="text" name="age_1"></p> <p><label for="sex_1">性别:</label> <input type="text" name="sex_1"></p> <p><label for="dep_1">部门:</label> <input type="text" name="dep_1"></p> <p><label for="pro_1">职位:</label> <input type="text" name="pro_1"></p> </fieldset> <input type="button" class="button" onclick="showUserDialog(1)" value="显示子窗口一"> </div>
主窗口js
var options = "location=no,menubar=no,resizable=no,scrollbars=yes,status=no,titlebar=yes,toolbar=no,left=200,top=200,height=300,width=400"; var dialogOptions = "dialogWidth:400px;dialogHeight:300px;dialogLeft:350px;dialogTop:150px;center:no;help:no;resizable:no;status:no;scroll:no"; var legends = ["window.open()","window.showModalDialog()","window.showModelessDialog()"]; var title = ""; var arg_2 = new Object(); function showUserDialog(flag){ title = legends[flag - 1]; switch (flag) { case 1: window.open("inner_1.html","_blank",options); break; case 2: arg_2.title = title; arg_2.name_2 = document.all.name_2.value; arg_2.age_2 = document.all.age_2.value; arg_2.sex_2 = document.all.sex_2.value; arg_2.dep_2 = document.all.dep_2.value; arg_2.pro_2 = document.all.pro_2.value; var res_2 = window.showModalDialog("inner_2.html",arg_2,dialogOptions); if(typeof(res_2) == "object"){ document.all.name_2.value = res_2.name_2; document.all.age_2.value = res_2.age_2; document.all.sex_2.value = res_2.sex_2; document.all.dep_2.value = res_2.dep_2; document.all.pro_2.value = res_2.pro_2; } break; case 3: window.showModalDialog("inner_3.html",window,dialogOptions); break; default: break; } }
子窗口html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <script language="javascript" src="script/popupWindow.js"></script> </head> <body onload="init_1()"> <div align="center"> <fieldset> <script language="javascript"> document.write("<legend>" + getTitle_1() + "</legend>"); </script> <p><label for="name_1">名字:</label> <input type="text" name="name_1"></p> <p><label for="age_1">年龄:</label> <input type="text" name="age_1"></p> <p><label for="sex_1">性别:</label> <input type="text" name="sex_1"></p> <p><label for="dep_1">部门:</label> <input type="text" name="dep_1"></p> <p><label for="pro_1">职位:</label> <input type="text" name="pro_1"></p> </fieldset> <input type="button" value="提 交" onclick="handIn_1()" class="">
</div> </body> </html>
子窗口js
function init_1(){ document.all.name_1.value = window.opener.document.all.name_1.value; document.all.age_1.value = window.opener.document.all.age_1.value; document.all.sex_1.value = window.opener.document.all.sex_1.value; document.all.dep_1.value = window.opener.document.all.dep_1.value; document.all.pro_1.value = window.opener.document.all.pro_1.value; } function handIn_1(){ window.opener.document.all.name_1.value = document.all.name_1.value; window.opener.document.all.age_1.value = document.all.age_1.value; window.opener.document.all.sex_1.value = document.all.sex_1.value; window.opener.document.all.dep_1.value = document.all.dep_1.value; window.opener.document.all.pro_1.value = document.all.pro_1.value; window.close(); } function getTitle_1(){ return window.opener.title; }