首页 > 专利信息

网页打开新窗口——Window.open（）详解

⽹页打开新窗⼝——Window.open（）详解

[html]

1. Window.Open详解

4. ⼀、window.open()⽀持环境：

5. JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+

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不与主窗⼝在同⼀路径

virtualrouter

下，前⾯应写明路径，绝对路径()和相对路径(../)均可。⽤单引号和双引号都可以，只是不要混⽤。

64. 　这⼀段代码可以加⼊HTML的任意位置，<head>和</head>之间可以，<body>间</body>也可以，越

前越早执⾏，尤其是页⾯代码长，⼜想使页⾯早点弹出就尽量往前放。

65.

66. 【2、经过设置后的弹出窗⼝】

67.

68. 　下⾯再说⼀说弹出窗⼝的设置。只要再往上⾯的代码中加⼀点东西就可以了。

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. }

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;

本文发布于:2024-09-22 07:38:30，感谢您对本站的认可！

本文链接：https://www.17tex.com/tex/2/163461.html

上一篇：第五届全国青少年创意编程与智能设计大赛智能设计比赛获奖名单

下一篇：基于89C52单片机的家用通风控制系统的设计

标签：弹出是否代码参数位置标签个窗浏览器

留言与评论（共有 0 条评论）