JS 打开新窗口的方法|极客笔记

JS 打开新窗口的方法

在网页开发中，经常会遇到需要在新窗口中打开链接的需求。在 JavaScript 中，有多种方法可以实现在新窗口中打开链接的功能。本文将详细介绍这些方法，并给出具体的示例代码。

1. 使用 window.open()

window.open() 是 JavaScript 中用于打开新窗口的方法。它的语法如下：

window.open(URL, name, specs, replace);

URL 参数是要在新窗口中打开的链接地址。
name 参数是新窗口的名称，如果指定相同的名称，则会在同一个窗口中打开链接，如果不指定名称，则会在新窗口中打开链接。
specs 参数是一个包含窗口特性的字符串，如窗口大小、是否有工具栏等。其格式为："特性1=值1, 特性2=值2, ..."。常用的特性包括：
- width：窗口宽度
- height：窗口高度
- top：窗口距离屏幕顶部的距离
- left：窗口距离屏幕左侧的距离
- toolbar：是否显示工具栏
- menubar：是否显示菜单栏
- resizable：是否可以调整窗口大小
- scrollbars：是否显示滚动条
replace 参数是一个布尔值，指定是否在浏览历史中替换当前打开的条目。

下面是一个使用 window.open() 方法打开新窗口的示例：

// 打开新窗口，在新窗口中显示百度首页
window.open("https://www.baidu.com", "_blank");

在这个示例中，调用 window.open("https://www.baidu.com", "_blank") 方法会在新窗口中打开百度首页。

2. 使用 a 标签的 target 属性

除了 JavaScript 中的 window.open() 方法，还可以利用 HTML 的 <a> 标签的 target 属性来实现在新窗口中打开链接的功能。target 属性有以下几个取值：

_self：默认值，表示在当前窗口中打开链接。
_blank：表示在新窗口中打开链接。
_parent：表示在父窗口中打开链接。
_top：表示在顶层窗口中打开链接。

下面是一个使用 <a> 标签的 target 属性打开新窗口的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Open Link in New Window</title>
</head>
<body>
    <a href="https://www.baidu.com" target="_blank">Open Baidu in New Window</a>
</body>
</html>

在这个示例中，点击链接会在新窗口中打开百度首页。

3. 使用 form 表单提交

另一种在新窗口中打开链接的方法是通过 form 表单的提交。当 form 表单的 target 属性设置为 _blank 时，提交表单会在新窗口中打开链接。

下面是一个使用 form 表单提交在新窗口中打开链接的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Submit Form in New Window</title>
</head>
<body>
    <form action="https://www.baidu.com" method="get" target="_blank">
        <button type="submit">Go to Baidu</button>
    </form>
</body>
</html>

在这个示例中，点击按钮将会提交表单并在新窗口中打开百度首页。