JavaScript window.open 弹出窗口位置与参数详解

作者:像素漫游

时间:2026-10-27

浏览:466

本文详细解析 JavaScript 中 window.open 方法的用法,重点介绍如何设置弹出窗口的高度、宽度、距离屏幕上下左右的像素值,以及工具栏、菜单栏、滚动条等界面元素的显示控制。通过代码示例展示如何动态获取用户输入并精确控制新窗口的位置与样式,适用于需要定制弹窗体验的 Web 开发场景。

文章目录

window.open 基础参数说明

关于 window.open 方法弹出的窗口位置设置问题,此处做简要记录。

具体实现代码如下:

<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 定义窗口的高度;
width=400 定义窗口的宽度;
top=0 定义窗口距离屏幕上边缘的像素值;
left=0 定义窗口距离屏幕左侧边缘的像素值;
toolbar=no 控制是否显示工具栏,设置为 yes 则显示;
menubar 和 scrollbars 分别控制菜单栏和滚动栏的显示;
resizable=no 控制是否允许用户改变窗口大小,设置为 yes 则允许;
location=no 控制是否显示地址栏,设置为 yes 则显示;
status=no 控制是否显示状态栏内的信息(通常显示文件已打开状态),设置为 yes 则显示;
</SCRIPT> 表示 JavaScript 脚本结束。

动态控制弹窗位置示例

以下为动态控制弹窗位置的示例代码:


实现代码如下:

<html>
<head>
<script type="text/javascript">
function neww(){
var w=document.getElementById('w').value;
alert(w);
var h=document.getElementById('h').value;
var hh=document.getElementById("hh").value;
var v=document.getElementById('v').value;
var style="directories=no,location=no,menubar=no,width="+w+"height"+h;
var myFunc=window.open("http://www.baidu.com","nwindow",style);
myFunc.moveTo(hh,v);
}
</script>
</head>
<body>
新窗口的高度:<input type="text" id="h" size="4" value="300" />
新窗口的宽度:<input type="text" id="w" size="4" value="300" />
新窗口的垂直坐标:<input type="text" id="hh" size="4" value="300" />
新窗口的水平坐标:<input type="text" id="v" size="4" value="300" />
<button onclick="new();">打开心弹窗</button>
</body>
</html>

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
相关文章