window对象提供的功能之打开新窗口
使用window.open方法即可打开新的浏览器窗口。使用window.opener可以访问父窗口。以下是一个实例：
ex1.html:
代码
代码
ex1.html:
代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1//DTD/xhtml-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title>ex1</title>
6
7 <script type="text/javascript">
8 function editInNewWin() {
9 // 打开新窗口，加载ex2.html
10 var win = window.open("ex2.html","new","width=400,height=300");
11 }
12 </script>
13
14 <style type="text/css">
15 #editor {width:300px}
16 #title,#editor textarea {width:100%;height:80%}
17 </style>
18 </head>
19
20 <body>
21 <form action="#">
22 <div id="editor">
23 标题：
24 <input type="text" id="title" />
25 内容：
26 <textarea cols="30" rows="5" id="content"></textarea>
27 <input type="button" value="提交" />
28 <input type="button" value="在新窗口中编辑" onclick="editInNewWin()"/>
29 </div>
30 </form>
31 </body>
32 </html>
2 "http://www.w3.org/TR/xhtml1//DTD/xhtml-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title>ex1</title>
6
7 <script type="text/javascript">
8 function editInNewWin() {
9 // 打开新窗口，加载ex2.html
10 var win = window.open("ex2.html","new","width=400,height=300");
11 }
12 </script>
13
14 <style type="text/css">
15 #editor {width:300px}
16 #title,#editor textarea {width:100%;height:80%}
17 </style>
18 </head>
19
20 <body>
21 <form action="#">
22 <div id="editor">
23 标题：
24 <input type="text" id="title" />
25 内容：
26 <textarea cols="30" rows="5" id="content"></textarea>
27 <input type="button" value="提交" />
28 <input type="button" value="在新窗口中编辑" onclick="editInNewWin()"/>
29 </div>
30 </form>
31 </body>
32 </html>
ex2.html:
代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title>ex2</title>
6 <script type="text/javascript">
7 function init() {
8 // 父窗口
9 var parent = window.opener;
10 if(!parent) return;
11
12 // 从父窗口中获取标题和内容，填入子窗口的相应位置
13 $("title").value = parent.document.getElementById("title").value;
14 $("content").value = parent.document.getElementById("content").value;
15 }
16
17 function $(id) {
18 return document.getElementById(id);
19 }
20 </script>
21
22 <style type="text/css">
23 #editor {width:300px}
24 #title,#editor textarea {width:100%;height:80%}
25 </style>
26 </head>
27
28 <body onload="init()">
29 <form action="#">
30 <div id="editor">
31 标题：
32 <input type="text" id="title" />
33 内容：
34 <textarea cols="30" rows="5" id="content"></textarea>
35 <input type="button" value="提交" />
36 </div>
37 </form>
38 </body>
39 </html>
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <title>ex2</title>
6 <script type="text/javascript">
7 function init() {
8 // 父窗口
9 var parent = window.opener;
10 if(!parent) return;
11
12 // 从父窗口中获取标题和内容，填入子窗口的相应位置
13 $("title").value = parent.document.getElementById("title").value;
14 $("content").value = parent.document.getElementById("content").value;
15 }
16
17 function $(id) {
18 return document.getElementById(id);
19 }
20 </script>
21
22 <style type="text/css">
23 #editor {width:300px}
24 #title,#editor textarea {width:100%;height:80%}
25 </style>
26 </head>
27
28 <body onload="init()">
29 <form action="#">
30 <div id="editor">
31 标题：
32 <input type="text" id="title" />
33 内容：
34 <textarea cols="30" rows="5" id="content"></textarea>
35 <input type="button" value="提交" />
36 </div>
37 </form>
38 </body>
39 </html>
