JavaScript window.open
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 window.open 方法。此方法允许开发人员以编程方式打开新的浏览器窗口或选项卡。它通常用于弹出窗口、外部链接和多窗口应用程序。
基本定义
window.open 方法创建一个新的浏览器窗口或选项卡。它接受三个参数：URL、窗口名称和窗口特性。URL 指定要加载的页面，而名称可以用于定位特定窗口。
窗口特性控制新窗口的外观。这些特性包括大小、工具栏和滚动条。出于用户体验和安全原因，现代浏览器通常会限制弹出窗口。
基本的 window.open
此示例演示了打开新浏览器窗口的最简单方法。
<!DOCTYPE html>
<html>
<head>
<title>Basic window.open</title>
</head>
<body>
<button onclick="openWindow()">Open Window</button>
<script>
function openWindow() {
window.open('https://www.example.com');
}
</script>
</body>
</html>
此代码创建一个按钮，单击该按钮时会在新选项卡中打开 example.com。window.open 方法仅使用 URL 参数调用。大多数现代浏览器会将此打开在新选项卡中，而不是弹出窗口中。
行为取决于浏览器设置和用户偏好。某些浏览器可能会默认阻止弹出窗口，需要用户许可。这是一个没有窗口自定义的基本示例。
使用窗口特性打开
此示例展示了如何自定义新窗口的外观和行为。
<!DOCTYPE html>
<html>
<head>
<title>Window with Features</title>
</head>
<body>
<button onclick="openCustomWindow()">Open Custom Window</button>
<script>
function openCustomWindow() {
const features = 'width=600,height=400,menubar=no,toolbar=no';
window.open('about:blank', 'myWindow', features);
}
</script>
</body>
</html>
在这里，我们指定了窗口尺寸（600x400 像素）并禁用了菜单栏和工具栏。第二个参数将窗口命名为“myWindow”，可用于定位。URL“about:blank”打开一个空白页面。
窗口特性指定为逗号分隔的字符串。常用特性包括 width、height、scrollbars 和 resizable。请注意，由于安全限制，许多特性在现代浏览器中会被忽略。
控制已打开的窗口
此示例演示了如何与新打开的窗口进行交互。
<!DOCTYPE html>
<html>
<head>
<title>Controlling Window</title>
</head>
<body>
<button onclick="openAndControl()">Open and Control</button>
<script>
function openAndControl() {
const newWindow = window.open('', 'myWindow', 'width=400,height=300');
newWindow.document.write('<h1>Hello from parent!</h1>');
newWindow.document.close();
setTimeout(() => {
newWindow.close();
}, 3000);
}
</script>
</body>
</html>
此代码打开一个窗口，向其中写入内容，然后在 3 秒后将其关闭。window.open 返回对新窗口对象的引用。此引用允许操作新窗口。
我们使用 document.write 添加内容，使用 close 以编程方式关闭窗口。请注意，出于安全原因，许多浏览器会限制跨域窗口控制。
使用 Target 打开
此示例展示了如何使用窗口名称参数进行定位。
<!DOCTYPE html>
<html>
<head>
<title>Window Targeting</title>
</head>
<body>
<button onclick="openInSameWindow()">Open in Same Window</button>
<button onclick="openInNewWindow()">Open in New Window</button>
<script>
function openInSameWindow() {
window.open('page1.html', 'myTargetWindow');
}
function openInNewWindow() {
window.open('page2.html', '_blank');
}
</script>
</body>
</html>
第一个按钮在名为“myTargetWindow”的目标窗口中打开内容。具有相同名称的后续调用将重用该窗口。第二个按钮使用“_blank”始终在新窗口/选项卡中打开。
目标名称遵循与 HTML target 属性相同的规则。特殊值包括“_blank”、“_self”、“_parent”和“_top”。这种定位机制对于单页应用程序非常有用。
带通信的弹出窗口
此高级示例演示了窗口之间的通信。
<!DOCTYPE html>
<html>
<head>
<title>Window Communication</title>
</head>
<body>
<button onclick="openPopup()">Open Popup</button>
<p id="message"></p>
<script>
let popupWindow;
function openPopup() {
popupWindow = window.open('', 'popup', 'width=300,height=200');
popupWindow.document.write(`
<h2>Child Window</h2>
<button onclick="window.opener.postMessage('Hello parent!', '*')">
Send Message
</button>
`);
window.addEventListener('message', (event) => {
document.getElementById('message').textContent =
`Received: ${event.data}`;
});
}
</script>
</body>
</html>
这创建了一个父子窗口关系。子窗口可以使用 postMessage 向父窗口发送消息。父窗口使用 addEventListener 监听消息。
postMessage API 是窗口之间进行通信的现代、安全的方式。在正确配置的情况下，它可以跨域工作。在生产代码中，始终验证消息来源以确保安全。
来源
在本文中，我们探讨了 JavaScript 中的 window.open 方法。这个强大的功能支持多窗口应用程序，但由于浏览器限制和用户体验方面的考虑，应谨慎使用。
作者
列出 所有 JS DOM 教程。