JS 打开新页面|极客笔记

JS 打开新页面

在网页开发中，经常会碰到需要通过 JavaScript 来打开一个新页面的情况。这种需求可能是在用户点击某个按钮时跳转到另一个页面，或者是在某个事件触发时打开一个新标签页等等。在本文中，我们将详细讨论如何使用 JavaScript 来实现这种功能。

使用 `window.open()` 方法打开新页面

在 JavaScript 中，我们可以使用 window.open() 方法来打开一个新的浏览器窗口或标签页。这个方法接受三个参数：要打开的 URL、窗口的名称（可以为空）、窗口的特性（比如宽度、高度、位置等）。

下面是一个简单的示例，当用户点击一个按钮时，会打开一个新页面：

<!DOCTYPE html>
<html>
<head>
    <title>打开新页面示例</title>
</head>
<body>
    <h1>点击下面的按钮打开新页面：</h1>
    <button onclick="openNewPage()">打开新页面</button>

    <script>
        function openNewPage() {
            window.open('https://www.example.com', '_blank', 'width=600,height=400');
        }
    </script>
</body>
</html>

在这个示例中，当用户点击按钮时，会打开一个新标签页，指向 https://www.example.com，并且窗口的宽度为 600 像素，高度为 400 像素。

在新标签页中打开页面

通常情况下，我们会在新的标签页中打开一个页面，而不是新的浏览器窗口。为了让链接在新的标签页中打开，我们可以通过设置 target="_blank" 来实现。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>在新标签页打开链接示例</title>
</head>
<body>
    <h1>点击链接查看新页面：</h1>
    <a href="https://www.example.com" target="_blank">点击这里</a>
</body>
</html>

在这个示例中，用户点击链接时，会在新的标签页中打开 https://www.example.com 页面。

使用 JavaScript 动态生成链接

有时候我们需要根据用户的输入或者其他条件来动态生成链接并打开新页面。这时候我们可以通过 JavaScript 来创建一个 <a> 元素，然后模拟用户点击来实现打开新页面的效果。下面是一个示例：

<!DOCTYPE html>
<html>
<head>
    <title>动态生成链接打开新页面示例</title>
</head>
<body>
    <h1>请输入要打开的网站：</h1>
    <input type="text" id="urlInput">
    <button onclick="openDynamicPage()">打开新页面</button>

    <script>
        function openDynamicPage() {
            var url = document.getElementById('urlInput').value;
            var a = document.createElement('a');
            a.href = url;
            a.target = '_blank';
            a.click();
        }
    </script>
</body>
</html>

在这个示例中，用户在输入框中输入要打开的网址，然后点击按钮，会在新的标签页中打开用户输入的网址。