Window彈窗案例:
1:需求
*創建一個頁面
有兩個輸入項
有一個按鈕(用來實現子窗口的彈出)
*創建一個彈出窗口(子窗口)
實現一個表格輸出
表格每一行有一個按鈕,姓名及ID
按鈕對應一個事件,將當前編號以及姓名信息編輯到第一頁相對應位置
2:實現過程
*創建第一個頁面
相關知識:
**open() 方法用於打開一個新的瀏覽器窗口或查找一個已命名的窗口
**語法 window.open(URL,name,features,replace)
**注意 window.open()和document.open()的區別
<html >
<body >
<script type ="text/javascript" >
myWindow=window.open('' ,'MyName' ,'width=200,height=100' )
myWindow.document.write("This is 'myWindow'" )
myWindow.focus()
myWindow.opener.document.write("This is the parent window" )
</script >
</body >
</html >
<body >
代碼如下
<body >
編號:<input type ="text" id ="numid" /> <br />
姓名:<input type ="text" id ="nameid" /> <br />
<input type ="button" value ="選擇" onclick ="open1()" />
</body >
<script type ="text/javascript" >
function open1 () {
window.open("cd.html" ,"" ,"width=250,height=150" );
}
</script >
*創建第二個彈出窗口
相關知識點:
**opener
是一個可讀可寫的屬性,可返回對創建該窗口的 Window 對象的引用
創建的窗口可以引用創建它的窗口所定義的屬性和函
<table border="1" bordercolor="blue">
<tr>
<td><input type="button" value="選擇" onclick="s1('100','東方不敗');"/></td>
<td>100</td>
<td>東方不敗</td>
</tr>
<tr>
<td><input type="button" value="選擇" onclick="s1('101','嶽不羣');"/></td>
<td>101</td>
<td>嶽不羣</td>
</tr>
<tr>
<td><input type="button" value="選擇" onclick="s1('102','林平之');"/></td>
<td>102</td>
<td>林平之</td>
</tr>
</table>
</body>
<script type="text/javascript">
//實現s1方法
function s1(num1,name1) {
//需要把num1和name1賦值到window頁面
//跨頁面的操作 opener:得到創建這個窗口的窗口 得到window頁面
var pwin = window.opener; //得到window頁面
pwin.document.getElementById("numid").value = num1;
pwin.document.getElementById("nameid").value = name1;
//關閉窗口
window.close();
}
</script>