当前位置：首页 > 全部内容 > 正文

JavaScript window.open 弹窗参数详解与实战应用指南

作者：异步漫步

时间：2026-10-30

浏览：619

本文深入解析JavaScript中window.open方法的完整参数配置，涵盖窗口尺寸、位置及界面元素的自定义设置。通过多个实战案例，详细演示如何控制父窗口与子窗口的刷新、关闭及数据交互，包括同时弹出多窗口、定时自动关闭、页面内嵌弹窗以及利用Cookie实现单次弹出控制的高级技巧，帮助开发者掌握灵活且安全的弹窗开发方案。

文章目录

JavaScript window.open 弹窗参数详解与实战应用指南

本文系统梳理了JavaScript中弹出窗口的核心用法与高级技巧，内容具备较高的实战参考价值，下文将逐一展开详解。

// 关闭子窗口，父窗口显示确认对话框


this.Response.Write("<script language=javascript>window.close();</script>");

// 关闭子窗口，父窗口与子窗口均不显示对话框，直接执行关闭操作


this.Response.Write("<script>");
this.Response.Write("{top.opener =null;top.close();}");
this.Response.Write("</script>");

// 弹出新窗口并刷新当前页面，设置宽度200像素、高度200像素，隐藏菜单栏、工具栏、地址栏及状态栏


this.Response.Write("<script language=javascript>window.open('rows.aspx','newwindow','width=200,height=200')</script>");

// 弹出新窗口并刷新当前页面


this.Response.Write("<script language=javascript>window.open('rows.aspx')</script>");
this.Response.Write("<script>window.open('WebForm2.aspx','_blank');</script>");

// 弹出提示框，确认后跳转至WebForm2.aspx页面（在同一IE窗口中）


this.Response.Write(" <script language=javascript>alert('注册成功');window.window.location.href='WebForm2.aspx';</script> ");

// 关闭当前子窗口，并刷新父窗口页面


this.Response.Write("<script>window.opener.location.href=window.opener.location.href;window.close();</script>");
this.Response.Write("<script>window.opener.location.replace(window.opener.document.referrer);window.close();</script>");

// 子窗口执行操作后刷新父窗口


this.Response.Write("<script>window.opener.location.href=window.opener.location.href;</script>");
this.Response.Write("<script>window.opener.location.href='WebForm1.aspx';</script>");

// 弹出提示框，确认后打开子窗口（WebForm2.aspx）


this.Response.Write("<script language='javascript'>alert('发表成功！');window.open('WebForm2.aspx')</script>");

// 弹出提示框，确认后刷新父窗口


this.Response.Write("<script>alert('发表成功！');window.opener.location.href=window.opener.location.href;</script>");

// 弹出与原窗口相同内容的页面


<INPUT type="button" value="Button" onclick="javascript:window.open(window.location.href)">
Response.Write("parent.mainFrameBottom.location.href='yourwebform.aspx?temp=" +str+"';");

<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=n o, status=no') //这句要写成一行
--> 
</SCRIPT>

window.open 核心参数解析

参数详细说明如下：

<SCRIPT LANGUAGE="javascript"> 表示JavaScript脚本开始； window.open 是用于弹出新窗口的核心命令； 'page.html' 指定弹出窗口的文件名； 'newwindow' 指定弹出窗口的名称（非文件名），此参数可选，若不需要可留空''； height=100 定义窗口高度为100像素； width=400 定义窗口宽度为400像素； top=0 定义窗口距离屏幕顶部的像素值； left=0 定义窗口距离屏幕左侧的像素值； toolbar=no 控制是否显示工具栏，设为yes则显示； menubar，scrollbars 分别控制是否显示菜单栏和滚动栏； resizable=no 控制是否允许用户调整窗口大小，设为yes则允许； location=no 控制是否显示地址栏，设为yes则显示； status=no 控制是否显示状态栏信息（如文件加载状态），设为yes则显示； </SCRIPT> 表示JavaScript脚本结束

'newwin': 用于隐藏菜单栏、地址栏和工具条 width=50: 设置窗口宽度为50像素 height=50: 设置窗口高度为50像素 scrollbars=yes/no: 控制滚动条显示状态 top=50: 设置窗口距离屏幕顶部的偏移量 left=50: 设置窗口距离屏幕左侧的偏移量

示例如下：


window.open('detail.aspx?ID="+e.Item.Cells[1].Text+"','newwin','width=750,height=600,scrollbars=yes,top=50,left=50');"); 
this.Response.Write("<Script>window.open('WebForm2.aspx','','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=750,height=470,left=80,top=40');</script>");

示例如下：


this.Response.Write("<script>alert('发表成功！');window.opener.location.href=window.opener.location.href;</script>");
this.Response.Write("<script>");
this.Response.Write("{top.opener =null;top.close();}");
this.Response.Write("</script>");

示例如下：


linkcolumn1.DataNavigateUrlFormatString="javascript:varwin=window.open('edit_usr.aspx?actid={0}','newwin','width=750,height=600,scrollbars=yes,top=50,left=50');window.close()";

this.Response.Write("<Script>window.open('WebForm7.aspx','','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=750,height=470,left=80,top=40');</script>");

弹出窗口是否显示菜单或工具栏与当前窗口无关，只要在页面中编写相应脚本即可触发。例如：

<a href=# onclick="window.open('xxx.aspx','窗口名称','参数');">xxxxx</a>

以下列出部分弹窗参数供参考，用户可根据需求自行设定，各参数之间使用逗号分隔

可选参数。字符串形式列出对象属性表，各项属性用逗号分隔（例如："fullscreen=yes, toolbar=yes"）。以下是支持的特性列表。

channelmode = { yes | no | 1 | 0 } 指定是否在窗口中启用阶梯模式（通常用于全屏）。默认值为no。

directories = { yes | no | 1 | 0 } 指定是否在窗口中显示导航按钮。默认值为yes。

fullscreen = { yes | no | 1 | 0 } 指定是否以全屏模式显示浏览器。默认值为no。使用此属性需谨慎，因为它可能隐藏标题栏和菜单，建议提供按钮或其他提示帮助用户关闭窗口（如ALT+F4）。全屏窗口必须启用阶梯(channelmode)模式。

height = number 指定窗口高度，单位为像素。最小值为100。

left = number 指定窗口左侧距离屏幕边缘的距离，单位为像素。值必须大于或等于0。

location = { yes | no | 1 | 0 } 指定是否在窗口中显示地址栏。默认值为yes。

menubar = { yes | no | 1 | 0 } 指定是否在窗口中显示菜单栏。默认值为yes。

resizable = { yes | no | 1 | 0 } 指定是否在窗口中显示调整大小的句柄。默认值为yes。

scrollbars = { yes | no | 1 | 0 } 指定是否在窗口中显示水平或垂直滚动条。默认值为yes。

status = { yes | no | 1 | 0 } 指定是否在窗口中显示状态栏。默认值为yes。

titlebar = { yes | no | 1 | 0 } 指定是否在窗口中显示标题栏。在非调用HTML Application或对话框的情况下，此属性将被忽略。默认值为yes。

toolbar = { yes | no | 1 | 0 } 指定是否在窗口中显示工具栏（包括前进、后退、停止等按钮）。默认值为yes。

top = number 指定窗口顶部距离屏幕边缘的位置，单位为像素。值必须大于或等于0。

width = number 指定窗口宽度，单位为像素。最小值为100。

基础弹窗代码实现

【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=n o, status=no') //这句要写成一行
　　--> 
　　</SCRIPT>

参数详细说明如下：

<SCRIPT LANGUAGE="javascript"> 表示JavaScript脚本开始； window.open 是用于弹出新窗口的核心命令； 'page.html' 指定弹出窗口的文件名； 'newwindow' 指定弹出窗口的名称（非文件名），此参数可选，若不需要可留空''； height=100 定义窗口高度为100像素； width=400 定义窗口宽度为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="#" onclick="openwin()">打开一个窗口</a>

注意：此处使用的“#”为虚拟链接地址。

方法四：通过按钮调用： <input type="button" onclick="openwin()" value="打开窗口">

多窗口管理与位置控制

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

对源代码进行适当修改：


<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=n o, status=no")//写成一行 
　　window.open ("page2.html", "newwindow2", "height=100, width=100, top=1 00, left=100,toolbar=no, menubar=no, scrollbars=no, resizable=no, loca tion=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控制弹出窗口】

回顾前述示例，虽然弹窗功能强大，但存在一个小缺陷：若将上述脚本置于频繁访问的页面（如首页），每次刷新页面都会弹出窗口。我们可以利用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()">（注意此处为loadpop而非openwin）替换主页面中原有的<BODY>标签即可。尝试刷新页面或重新进入该页面，窗口将不再弹出，真正实现Pop-Only-Once（仅弹出一次）的效果。

以上就是本文的全部内容，希望对各位的学习有所帮助，也欢迎大家继续支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印，自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式，预览压缩前后的大小。

使用 ›
作者最新文章

JavaScript怎么遍历对象的Symbol键和不可枚举属性

封装一个健壮的JS字符串判空工具函数

JavaScript合并数组的三种常用方法：concat、扩展运算符与push

JavaScript立即执行函数(IIFE)是什么及基本语法

JS对象数组转字符串为什么推荐用JSON.stringify()

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JavaScript实现按钮点击冷却时间的完整代码示例