⽹页打开新窗⼝——Window.open（）详解
[html]
1. Window.Open详解
2.
3.
4. ⼀、window.open()⽀持环境：
5. JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+
6.
7. ⼆、基本语法：
8. window.open(pageURL,name,parameters)
9. 其中：
10. pageURL 为⼦窗⼝路径
11. name 为⼦窗⼝句柄
12. parameters 为窗⼝参数(各参数⽤逗号分隔)
13.
14. 三、⽰例：
15. <SCRIPT>
16. <!--
17. window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars
18. //写成⼀⾏
19. -->
20. </SCRIPT>
21.
22.
23. 脚本运⾏后，page.html将在新窗体newwindow中打开，宽为100，⾼为400，距屏顶0象素，屏左0象
素，⽆⼯具条，⽆菜单条，⽆滚动条，不可调整⼤⼩，⽆地址栏，⽆状态栏。请对照。
24. 上例中涉及的为常⽤的⼏个参数，除此以外还有很多其他参数，请见四。
25.
26. 四、各项参数
27. 其中yes/no也可使⽤1/0；pixel value为具体的数值，单位象素。
28.
29. 参数 | 取值范围 | 说明
30.
31. alwaysLowered | yes/no | 指定窗⼝隐藏在所有窗⼝之后
32. alwaysRaised | yes/no | 指定窗⼝悬浮在所有窗⼝之上
33. depended | yes/no | 是否和⽗窗⼝同时关闭
34. directories | yes/no | Nav2和3的⽬录栏是否可见
35. height | pixel value | 窗⼝⾼度
36. hotkeys | yes/no | 在没菜单栏的窗⼝中设安全退出热键
37. innerHeight | pixel value | 窗⼝中⽂档的像素⾼度
38. innerWidth | pixel value | 窗⼝中⽂档的像素宽度
39. location | yes/no | 位置栏是否可见
40. menubar | yes/no | 菜单栏是否可见
41. outerHeight | pixel value | 设定窗⼝(包括装饰边框)的像素⾼度
42. outerWidth | pixel value | 设定窗⼝(包括装饰边框)的像素宽度
43. resizable | yes/no | 窗⼝⼤⼩是否可调整
44. screenX | pixel value | 窗⼝距屏幕左边界的像素长度
45. screenY | pixel value | 窗⼝距屏幕上边界的像素长度
46. scrollbars | yes/no | 窗⼝是否可有滚动栏
47. titlebar | yes/no | 窗⼝题⽬栏是否可见
48. toolbar | yes/no | 窗⼝⼯具栏是否可见
49. Width | pixel value | 窗⼝的像素宽度
50. z-look | yes/no | 窗⼝被激活后是否浮在其它窗⼝之上
51.
52. =====================================================
53.
54. 【1、最基本的弹出窗⼝代码】
55. 其实代码⾮常简单：
56. <SCRIPT LANGUAGE="javascript">
57. <!--
58. window.open ('page.html')
59. -->
60. </SCRIPT>
61.
62. 因为着是⼀段javascripts代码，所以它们应该放在<SCRIPT LANGUAGE="javascript">标签
和</script>之间。<!-- 和 -->是对⼀些版本低的浏览器起作⽤，在这些⽼浏览器中不会将标签中的代码作为⽂本显⽰出来。要养成这个好习惯啊。
63. Window.open ('page.html') ⽤于控制弹出新的窗⼝page.html，如果page.html不与主窗⼝在同⼀路径
山东属于哪个战区下，前⾯应写明路径，绝对路径()和相对路径(../)均可。⽤单引号和双引号都可以，只是不要混⽤。
什么游戏好玩64. 这⼀段代码可以加⼊HTML的任意位置，<head>和</head>之间可以，<body>间</body>也可以，越
前越早执⾏，尤其是页⾯代码长，⼜想使页⾯早点弹出就尽量往前放。
65.
66. 【2、经过设置后的弹出窗⼝】
67.
68. 下⾯再说⼀说弹出窗⼝的设置。只要再往上⾯的代码中加⼀点东西就可以了。
69. 我们来定制这个弹出的窗⼝的外观，尺⼨⼤⼩，弹出的位置以适应该页⾯的具体情况。
69. 我们来定制这个弹出的窗⼝的外观，尺⼨⼤⼩，弹出的位置以适应该页⾯的具体情况。
70. <SCRIPT LANGUAGE="javascript">
71. <!--
72. window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars
73. //写成⼀⾏
74. -->
75. </SCRIPT>
76.
77. 参数解释：
78. <SCRIPT LANGUAGE="javascript"> js脚本开始；
79. window.open 弹出新窗⼝的命令；
80. 'page.html' 弹出窗⼝的⽂件名；
81. 'newwindow' 弹出窗⼝的名字（不是⽂件名），⾮必须，可⽤空''代替；
82. height=100窗⼝⾼度；
83. width=400窗⼝宽度；
84. top=0窗⼝距离屏幕上⽅的象素值；
85. left=0窗⼝距离屏幕左侧的象素值；
86. toolbar=no是否显⽰⼯具栏，yes为显⽰；
87. menubar，scrollbars 表⽰菜单栏和滚动栏。
88. Resizable=no是否允许改变窗⼝⼤⼩，yes为允许；
89. location=no是否显⽰地址栏，yes为允许；
90. status=no是否显⽰状态栏内的信息（通常是⽂件已经打开），yes为允许；
91. </SCRIPT> js脚本结束
92.
93. 【3、⽤函数控制弹出窗⼝】
94.
95. 下⾯是⼀个完整的代码。
96.
97. <html>
98. <head>
99. <script LANGUAGE="JavaScript">
100. <!--
101. function openwin() { window.open ("page.html", "newwindow", "height=100, width=400, toolbar=no, menubar 102. //写成⼀⾏
103. }
104. //-->
105. </script>
106. </head>
107. <body onload="openwin()">
108. …任意的页⾯内容…
有什么好玩的单机109. </body>
110. </html>
111.
112. 这⾥定义了⼀个函数openwin()，函数内容就是打开⼀个窗⼝。在调⽤它之前没有任何⽤途。
113. 怎么调⽤呢？
114. ⽅法⼀：<body onload="openwin()">浏览器读页⾯时弹出窗⼝；
115. ⽅法⼆：<body onunload="openwin()">浏览器离开页⾯时弹出窗⼝；
116. ⽅法三：⽤⼀个连接调⽤：
117. <a href="#"onclick="openwin()">打开⼀个窗⼝</a>
118. 注意：使⽤的"#"是虚连接。
119. ⽅法四：⽤⼀个按钮调⽤：
120. <input type="button"onclick="openwin()"value="打开窗⼝">
121.
122. 【4、同时弹出2个窗⼝】
123.
124. 对源代码稍微改动⼀下：
125.
126. <script LANGUAGE="JavaScript">
127. <!--
128. function openwin()
129. { window.open ("page.html", "newwindow", "height=100, width=100, top=0,left=0,toolbar=no, menubar=no, 130. //写成⼀⾏
131. window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar 132. //写成⼀⾏
133. }
134. //-->
135. </script>
136.
137. 为避免弹出的2个窗⼝覆盖，⽤top和left控制⼀下弹出的位置不要相互覆盖即可。最后⽤上⾯说过的四种⽅法调⽤即可。
138. 注意：2个窗⼝的name(newwindows和newwindow2)不要相同，或者⼲脆全部为空。OK？
139.
140. 【5、主窗⼝打开⽂件1.htm，同时弹出⼩窗⼝page.html】
141.
142. 如下代码加⼊主窗⼝<head>区：
143.
144. <script language="javascript">
145. <!--
146. function openwin()
147. {window.open("page.html","","width=200,height=200")
148. }
148. }
149. //-->
150. </script>
151.
152. 加⼊<body>区：
153. <a href="1.htm"onclick="openwin()">open</a>即可。
154.
155. 【6、弹出的窗⼝之定时关闭控制】
156.
157. 下⾯我们再对弹出的窗⼝进⾏⼀些控制，效果就更好了。如果我们再将⼀⼩段代码加⼊弹出的
页⾯(注意是加⼊到page.html的HTML中，可不是主页⾯中，否则…)，让它10秒后⾃动关闭是不是更酷了？
158. ⾸先，将如下代码加⼊page.html⽂件的<head>区：
159.
外墙外保温160. <script language="JavaScript">
161. function closeit()
162. {setTimeout("self.close()",10000) //毫秒}
163. </script>
164.
165. 然后，再⽤<body onload="closeit()">这⼀句话代替page.html中原有的<BODY>这⼀句就可以了。(这⼀句话千万不要忘记写啊！这⼀句的作⽤是调⽤关闭窗⼝的代码，10秒钟后就⾃⾏关闭该窗⼝。)
166.
167. 【7、在弹出窗⼝中加上⼀个关闭按钮】
168. <FORM>
169. <INPUT TYPE='BUTTON'VALUE='关闭'onClick='window.close()'>
170. </FORM>
171.
172. 呵呵，现在更加完美了！
173.
174. 【8、内包含的弹出窗⼝-⼀个页⾯两个窗⼝】
175.
176. 上⾯的例⼦都包含两个窗⼝，⼀个是主窗⼝，另⼀个是弹出的⼩窗⼝。
177. 通过下⾯的例⼦，你可以在⼀个页⾯内完成上⾯的效果。
178. <html>
179. <head>
180. <SCRIPT LANGUAGE="JavaScript">
181. function openwin()
182. {OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar 183. //写成⼀⾏
184. OpenWindow.document.write("<TITLE>例⼦</TITLE>")
185. OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")
186. OpenWindow.document.write("<h1>Hello!</h1>")
187. OpenWindow.document.write("New window opened!")
188. OpenWindow.document.write("</BODY>")
189. OpenWindow.document.write("</HTML>")
190. OpenWindow.document.close()}
191. </SCRIPT>
端午节说说个性简短192. </head>
193. <body>
194. <a href="#"onclick="openwin()">打开⼀个窗⼝</a>
195. <input type="button"onclick="openwin()"value="打开窗⼝">
196. </body>
197. </html>
198.
199. 看看 OpenWindow.document.write()⾥⾯的代码不就是标准的HTML吗？只要按照格式写更多
的⾏即可。千万注意多⼀个标签或少⼀个标签就会出现错误。记得⽤OpenWindow.document.close()结束啊。200.
201. 【9、终极应⽤--弹出的窗⼝之Cookie控制】
202.
203. 回想⼀下，上⾯的弹出窗⼝虽然酷，但是有⼀点⼩⽑病(沉浸在喜悦之中，⼀定没有发现吧？)⽐如你将上⾯的脚本放在⼀个需要频繁经过的页⾯⾥(例如⾸页)，那么每次刷新这个页⾯，窗⼝都会弹出⼀次，是不是⾮常烦⼈？:-(有解决的办法吗？Yes! ;-) Follow me.
204. 我们使⽤cookie来控制⼀下就可以了。
205. ⾸先，将如下代码加⼊主页⾯HTML的<HEAD>区：
206. <script>
207. function openwin()
208. {window.open("page.html","","width=200,height=200")}
209. function get_cookie(Name)
如何游泳210. {var search = Name + "="
211. var returnvalue = "";
212. if (kie.length > 0) {
213. offset = kie.indexOf(search)
214. if (offset != -1) {
215. offset += search.length
216. end = kie.indexOf(";", offset);
217. if (end == -1)
218. end = kie.length;
219. returnvalue=kie.substring(offset,end))
220. }
221. }
222. return returnvalue;
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论