JavaScript window.open() 方法使用详解与实战技巧

window.open() 支持环境与基本语法

该方法的浏览器兼容环境包括：JavaScript1.0+、JScript1.0+、Netscape Navigator 2+、Internet Explorer 3+ 以及 Opera 3+。

基本调用语法格式为：window.open(pageURL, name, parameters)

其中各参数含义如下：

pageURL 指定子窗口的文件路径。

name 指定子窗口的句柄名称。

parameters 为窗口配置参数，多个参数之间使用逗号分隔。

 
<SCRIPT>
<!-- 
window.open ('page.html','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
//写成一行
--> 
</SCRIPT>

执行上述脚本后，page.html 将在名为 newwindow 的新窗口中打开。该窗口宽度为400像素，高度为100像素，距离屏幕顶部和左侧均为0像素。同时禁用了工具栏、菜单栏、滚动条、大小调整功能、地址栏和状态栏。

上述示例仅使用了部分常用参数，其他可用参数详见下文参数列表。

注意：参数值 yes/no 也可使用 1/0 表示；pixel value 代表具体数值，单位为像素。

参数 | 取值范围 | 说明

alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后

alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上

depended | yes/no | 是否和父窗口同时关闭

directories | yes/no | Nav2和3的目录栏是否可见

height | pixel value | 窗口高度

hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键

innerHeight | pixel value | 窗口中文档的像素高度

innerWidth | pixel value | 窗口中文档的像素宽度

location | yes/no | 位置栏是否可见

menubar | yes/no | 菜单栏是否可见

outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度

outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度

resizable | yes/no | 窗口大小是否可调整

screenX | pixel value | 窗口距屏幕左边界的像素长度

screenY | pixel value | 窗口距屏幕上边界的像素长度

scrollbars | yes/no | 窗口是否可有滚动栏

titlebar | yes/no | 窗口题目栏是否可见

toolbar | yes/no | 窗口工具栏是否可见

Width | pixel value | 窗口的像素宽度

z-look | yes/no | 窗口被激活后是否浮在其它窗口之上

基础弹窗与参数配置示例

【1、最基本的弹出窗口代码】

实现代码非常简单：

 
<SCRIPT LANGUAGE="javascript">
<!-- 
window.open ('page.html')
--> 
</SCRIPT>

由于这是 JavaScript 代码，因此应将其放置在 <SCRIPT LANGUAGE="javascript"> 和 </script> 标签之间。<!-- 和 --> 注释符号用于兼容部分旧版本浏览器，防止这些浏览器将代码作为文本直接显示。建议养成这一编码习惯。

Window.open ('page.html') 用于控制弹出新窗口 page.html。如果 page.html 与主窗口不在同一目录下，需指定完整路径，可以是绝对路径（http://）或相对路径（../）。引号使用单引号或双引号均可，但需注意不要混用。

这段代码可以插入 HTML 的任意位置，无论是 <head> 与 </head> 之间，还是 <body> 与 </body> 之间均可。代码放置得越靠前执行越早，若页面代码较长且希望尽早弹出窗口，建议尽量向前放置。

【2、经过设置后的弹出窗口】

接下来介绍如何对弹出窗口进行设置，只需在上述代码基础上增加配置即可。

我们可以定制弹出窗口的外观、尺寸和位置，以适配具体页面需求。

 
<SCRIPT LANGUAGE="javascript">
<!-- 
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')
//写成一行
--> 
</SCRIPT>

参数解释如下：

<SCRIPT LANGUAGE="javascript"> 表示 JavaScript 脚本开始；

window.open 是弹出新窗口的命令；

'page.html' 指定弹出窗口的文件名；

'newwindow' 指定弹出窗口的名字（非文件名），该参数非必须，可使用空字符串 '' 代替；

height=100 设定窗口高度；

width=400 设定窗口宽度；

top=0 设定窗口距离屏幕上方的像素值；

left=0 设定窗口距离屏幕左侧的像素值；

toolbar=no 表示是否显示工具栏，yes 为显示；

menubar，scrollbars 分别表示菜单栏和滚动栏；

Resizable=no 表示是否允许改变窗口大小，yes 为允许；

location=no 表示是否显示地址栏，yes 为允许；

status=no 表示是否显示状态栏内的信息（通常是文件已经打开），yes 为允许；

</SCRIPT> 表示 JavaScript 脚本结束。

函数控制弹窗的多种调用方式

【3、用函数控制弹出窗口】

下面是一个完整的代码示例。

 
<html>
<head>
<script LANGUAGE="JavaScript">
<!-- 
function openwin() { window.open ("page.html", "newwindow", "height=100, width=400, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行
} 
//--> 
</script>
</head>
<body onload="openwin()">
…任意的页面内容…
</body>
</html>

这里定义了一个名为 openwin() 的函数，其内容用于打开一个窗口。在调用该函数之前，它不会执行任何操作。

如何调用呢？

方法一：<body onload="openwin()"> 在浏览器读取页面时弹出窗口；

方法二：<body onunload="openwin()"> 在浏览器离开页面时弹出窗口；

方法三：通过一个链接调用：

<a href="#" _fcksavedurl=""#"" _fcksavedurl=""#"" _fcksavedurl=""#"" onclick="openwin()">打开一个窗口</a>

注意：使用的 "#" 是虚链接。

方法四：通过一个按钮调用：

<input type="button" onclick="openwin()" value="打开窗口">

多窗口弹出与内容嵌入技巧

【4、同时弹出2个窗口】

对源代码稍作修改即可实现：

 
<script LANGUAGE="JavaScript">
<!-- 
function openwin()
{ window.open ("page.html", "newwindow", "height=100, width=100, top=0,left=0,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行
window.open ("page2.html", "newwindow2", "height=100, width=100, top=100, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no")
//写成一行
} 
//--> 
</script>

为避免弹出的两个窗口相互覆盖，可通过 top 和 left 参数控制弹出位置。最后使用前述四种方法之一进行调用即可。

注意：两个窗口的 name（newwindows 和 newwindow2）不要相同，或者干脆全部设为空。

【5、主窗口打开文件1.htm，同时弹出小窗口page.html】

将如下代码加入主窗口 <head> 区：

 
<script language="javascript">
<!-- 
function openwin()
{window.open("page.html","","width=200,height=200")
} 
//--> 
</script>

加入 <body> 区：

<a href="1.htm" onclick="openwin()">open</a> 即可。

弹窗定时关闭与内部控件控制

【6、弹出的窗口之定时关闭控制】

下面我们再对弹出的窗口进行一些控制，效果就更好了。如果我们再将一小段代码加入弹出的页面(注意是加入到page.html的HTML中，可不是主页面中，否则…)，让它10秒后自动关闭是不是更酷了？

首先，将如下代码加入 page.html 文件的 <head> 区：

 
<script language="JavaScript">
function closeit()
{setTimeout("self.close()",10000) //毫秒}
</script>

然后，用 <body onload="closeit()"> 这一句话代替 page.html 中原有的 <BODY> 这一句即可。（这一句话千万不要忘记写啊！这一句的作用是调用关闭窗口的代码，10秒钟后就自行关闭该窗口。）

【7、在弹出窗口中加上一个关闭按钮】

<FORM>

<INPUT TYPE='BUTTON' VALUE='关闭' onClick='window.close()'>

</FORM>

现在界面更加完美了！

【8、内包含的弹出窗口-一个页面两个窗口】

上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。

通过下面的例子，你可以在一个页面内完成上述效果。

 
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function openwin()
{OpenWindow=window.open("", "newwin", "height=250, width=250,toolbar=no,scrollbars="+scroll+",menubar=no");
//写成一行
OpenWindow.document.write("<TITLE>例子</TITLE>")
OpenWindow.document.write("<BODY BGCOLOR=#ffffff>")
OpenWindow.document.write("<h1>Hello!</h1>")
OpenWindow.document.write("New window opened!")
OpenWindow.document.write("</BODY>")
OpenWindow.document.write("</HTML>")
OpenWindow.document.close()}
</SCRIPT>
</head>
<body>
<a href="#" onclick="openwin()">打开一个窗口</a>
<input type="button" onclick="openwin()" value="打开窗口">
</body>
</html>

观察 OpenWindow.document.write() 里面的代码，可以发现这就是标准的 HTML。只要按照格式编写更多行即可。千万注意多一个标签或少一个标签就会出现错误，记得用 OpenWindow.document.close() 结束啊。

利用 Cookie 实现弹窗仅显示一次

【9、终极应用--弹出的窗口之Cookie控制】

回想一下，上面的弹出窗口虽然功能齐全，但有一点小毛病（沉浸在喜悦之中，一定没有发现吧？）比如你将上面的脚本放在一个需要频繁经过的页面里（例如首页），那么每次刷新这个页面，窗口都会弹出一次，是不是非常烦人？:-( 有解决的办法吗？Yes! ;-) Follow me.

我们使用 cookie 来控制一下就可以了。

首先，将如下代码加入主页面 HTML 的 <HEAD> 区：

 
<script>
function openwin()
{window.open("page.html","","width=200,height=200")}
function get_cookie(Name)
{var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset,end))
} 
} 
return returnvalue;
} 
function loadpopup(){
if (get_cookie('popped')==''){
openwin()
document.cookie="popped=yes"
} 
} 
</script>

然后，用 <body onload="loadpopup()">（注意不是 openwin 而是 loadpop 啊！）替换主页面中原有的 <BODY> 这一句即可。你可以试着刷新一下这个页面或重新进入该页面，窗口再也不会弹出了。真正的 Pop-Only-Once！

写到这里弹出窗口的制作和应用技巧基本上算是完成了，需要注意的是，JS 脚本中的大小写最好前后保持一致。