JS 打开新的页面|极客笔记

JS 打开新的页面

在前端开发中，有时候我们需要通过 JavaScript 来打开一个新的页面，可以是一个链接，也可以是一个新的空白页面。在本文中，我们将详细讨论如何使用 JavaScript 来实现这个功能。

通过链接

最简单的方法就是通过给定的链接来打开一个新的页面。我们可以使用 window.open() 方法来实现这个功能。

// 打开一个新的页面
window.open('https://www.example.com');

上面的代码会在新的窗口或标签页中打开一个名为 “https://www.example.com” 的页面。如果你想打开一个链接并指定新页面的大小和位置，可以使用以下代码：

// 打开一个新的页面，并指定大小和位置
window.open('https://www.example.com', 'newwindow', 'width=600, height=400, top=100, left=100');

在这个代码片段中，'newwindow' 是新窗口的名称，'width=600, height=400, top=100, left=100' 是新窗口的属性。

打开空白页面

有时候我们需要在新页面中显示一些动态生成的内容，而不是一个固定的链接。在这种情况下，我们可以打开一个空白页面，并通过 JavaScript 来动态地向页面写入内容。

// 打开一个空白页面
var newWindow = window.open('', 'newwindow', 'width=600, height=400, top=100, left=100');

// 向页面写入内容
newWindow.document.write('<h1>Hello, World!</h1>');

在这个代码片段中，window.open('', 'newwindow', 'width=600, height=400, top=100, left=100) 打开了一个空白页面，并指定了页面的大小和位置。然后，我们通过 newWindow.document.write('<h1>Hello, World!</h1>') 向页面写入了一个标题。

注意事项

在使用 window.open() 方法打开新页面时，一些浏览器会默认将其视为弹出窗口，并会进行阻止。为了确保你的页面正常工作，你可能需要做一些设置来允许弹出窗口。

在上述示例中，我们使用了一个按钮来触发打开新页面的操作。下面是一个完整的示例：

<!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 New Page</title>
</head>

<body>
    <button onclick="openNewPage()">Open New Page</button>

    <script>
        function openNewPage() {
            // 打开一个新的页面
            window.open('https://www.example.com');
        }
    </script>
</body>

</html>

在上面的示例中，当用户点击按钮时，会触发 openNewPage() 函数来打开一个名为 “https://www.example.com” 的页面。