windows弹窗案例
实现windows弹窗案例，需要两个窗口，一个是原窗口，另外一个是弹出的窗口
一、原窗口：tanchuang.html
两个输入框，一个按钮，为按钮添加事件，使得点击按钮的同时弹出另外一个窗口
二、弹出窗口：user.html
有一个table，四行三列，每一行有一个按钮，为按钮添加点击事件使得点击按钮的同时同一行的内容能够自动输入到原窗口的两个输入框中，之后自动关闭此网页
实现过程：原窗口 tanchuang.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<!---两个输入框-->
编号：<input type = "text" id = "numid"/></br>
姓名：<input type = "text" id = "nameid"/> </br>
<!---按钮，并为按钮添加点击事件-->
<input type = "button" value = "选择" onclick = "open1()"/>
<!---两个输入框-->
编号：<input type = "text" id = "numid"/></br>
姓名：<input type = "text" id = "nameid"/> </br>
<!---按钮，并为按钮添加点击事件-->
<input type = "button" value = "选择" onclick = "open1()"/>
<script type = "text/javascript">
//弹出新窗口，并规定弹出新窗口的大小
function open1(){
window.open ("user.html","","width= 600,height = 300");
}
</script>
</BODY>
</HTML>
//弹出新窗口，并规定弹出新窗口的大小
function open1(){
window.open ("user.html","","width= 600,height = 300");
}
</script>
</BODY>
</HTML>
页面效果：
新窗口：user.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<TABLE border = "1" bordercolor = "black">
<TR>
<TD>操作</TD>
<TD>编号</TD>
<TD>姓名</TD>
</TR>
<TR>
<!---按钮，并添加点击事件，绑定函数-->
<TD><input type = "button" value = "选择" onclick = "s1('100','张三');"/></TD>
<TD>100</TD>
<TD>张三</TD>
</TR>
<TR>
<TD><input type = "button" value = "选择" onclick = "s1('200','李四');"/></TD>
<TD>200</TD>
<TD>李四</TD>
</TR>
<TR>
<TD><input type = "button" value = "选择" onclick = "s1('300','王五');"/></TD>
<TD>300</TD>
<TD>王五</TD>
</TR>
</TABLE>
<script type = "text/javascript">
// 传递两个参数
function s1(num1,name1) {
//opener 跨页面的操作，得到创建这个窗口的窗口即 tanchuang.html
var twin = window.opener;
//获取到原窗口中Id值为"numid"的值并赋给它新的值
twin.document.getElementById("numid").value = num1;
//获取到原窗口中Id值为"nameid"的值并赋给它新的值
twin.document.getElementById("nameid").value = name1;
//关闭弹窗
window.close();
}
</script>
</BODY>
</HTML>
<TABLE border = "1" bordercolor = "black">
<TR>
<TD>操作</TD>
<TD>编号</TD>
<TD>姓名</TD>
</TR>
<TR>
<!---按钮，并添加点击事件，绑定函数-->
<TD><input type = "button" value = "选择" onclick = "s1('100','张三');"/></TD>
<TD>100</TD>
<TD>张三</TD>
</TR>
<TR>
<TD><input type = "button" value = "选择" onclick = "s1('200','李四');"/></TD>
<TD>200</TD>
<TD>李四</TD>
</TR>
<TR>
<TD><input type = "button" value = "选择" onclick = "s1('300','王五');"/></TD>
<TD>300</TD>
<TD>王五</TD>
</TR>
</TABLE>
<script type = "text/javascript">
// 传递两个参数
function s1(num1,name1) {
//opener 跨页面的操作，得到创建这个窗口的窗口即 tanchuang.html
var twin = window.opener;
//获取到原窗口中Id值为"numid"的值并赋给它新的值
twin.document.getElementById("numid").value = num1;
//获取到原窗口中Id值为"nameid"的值并赋给它新的值
twin.document.getElementById("nameid").value = name1;
//关闭弹窗
window.close();
}
</script>
</BODY>
</HTML>
页面效果：
刚开始写的时候，没有跳转到原窗口，获取id值的时候一直获取不到，后来才知道要先用 opener 跳转到原页面才行。
接下来就是重点了！！！
在我知道要用这个的同时，我又犯了一个错误，我把它当成方法使用了，写成了window.opener（），反复试了好几次，都没有出现想像中的效果，仔细观察才知道opener是一个属性！！！是属性！！！后面不能加括号，调用的话可以直接写window.opener
还有最后一..
这个案例用谷歌浏览器会没有什么效果，原因不是代码的问题，也不是浏览器的兼容性问题，原因是因为js代码的安全性很高，不允许访问本地文件，但在这个案例中呢，两个窗口都是本地文件，还有一点就是谷歌浏览器的安全级别很高，所以用谷歌浏览器浏览的时候就不会出现相应的效果。
初学者还有很多不足的地方，希望大神们多多指教
