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>