BOM编程之window对象的open函数、close函数、opener函数

以下为open函数的使用实例

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>BOM编程之window对象的open函数</title>
10  </head>
11  <body>
12     <script type="text/javascript">
13     /*
14         1.document是DOM对象，并且是DOM总的顶级根对象（当前网页文档）
15         2.window是BOM对象，并且是BOM中的顶级根对象（当前浏览器窗口）
16         3.window对象有一个open()函数，可以开启新窗口
17     */
18         function openbaidu(){
19             window.open("http://www.baidu.com")
20             //open函数的第二个参数是设置目标位置，和超链接的target属性相同
21             /*
22             window.open("http://www.baidu.com","_self");//不产生新页面，在原有页面上跳转
23             window.open("http://www.baidu.com","_blank");
24             window.open("http://www.baidu.com","_parent");
25             window.open("http://www.baidu.com","_top");
26             */
27         }
28     </script>
29     <input type="button" value="百度" onclick="openbaidu()">
30   
31  </body>
32 </html>

使用close函数需要和open函数配合一起使用，以下代码分别是使用open函数的window窗口和使用close函数的window窗口

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>BOM编程之window对象的close函数</title>
10  </head>
11  <body>
12     <script type="text/javascript">
13         function openWin(){
14             window.open("31.BOM编程之window对象的close函数的子窗口.html")
15         }
16     </script>
17     <input type="button" value="打开一个子窗口" onclick="openWin()">
18   
19  </body>
20 </html>

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>BOM编程之window对象的close函数的子窗口</title>
10  </head>
11  <body>
12     <script type="text/javascript">
13         function closeWin(){
14             if(window.confirm("确定要关闭吗?")){
15                 window.close();
16             }
17         }
18     </script>
19     <input type="button" value="关闭子窗口" onclick="closeWin()">
20   
21  </body>
22 </html>

opener函数用于调用父窗口的内容

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>BOM编程之window对象的opener属性</title>
10  </head>
11  <body>
12     <script type="text/javascript">
13         var username="zhangsan"
14         function sayHello(){
15             alert("hello world")
16         }
17         alert(username)
18         //等同于window.alert(username)
19         sayHello()
20         //等同于window.sayHello()
21         function openchildwin(){
22             window.open("32.BOM编程之window对象的opener属性的子窗口.html")
23         }
24     </script>
25     <input type="button" value="打开子窗口" onclick="openchildwin()">
26   
27  </body>
28 </html>

 1 <!doctype html>
 2 <html lang="en">
 3  <head>
 4   <meta charset="UTF-8">
 5   <meta name="Generator" content="EditPlus®">
 6   <meta name="Author" content="">
 7   <meta name="Keywords" content="">
 8   <meta name="Description" content="">
 9   <title>BOM编程之window对象的opener属性的子窗口</title>
10  </head>
11  <body>
12     <script type="text/javascript">
13         function openparentwin(){
14             var win32=window.opener//win32指的是32那个窗口的window，所以那个窗口可以访问什么win32就可以访问什么，可以实现父子通讯
15             alert(win32.username)
16             //var win32=window.opener
17             //win32.sayHello()
18         }
19     </script>
20     <input type="button" value="访问父窗口内容" onclick="openparentwin()"/>
21   
22  </body>
23 </html>