js 跳转打开新窗口|极客笔记

js 跳转打开新窗口

在网页开发中，有时我们需要在用户点击链接或者按钮时打开一个新的窗口来显示内容，这就需要使用 JavaScript 来实现。在本文中，我们将详细介绍如何使用 JavaScript 来实现跳转并在新窗口中打开链接。

基本跳转实现

最简单的跳转方式就是通过 window.open() 方法来打开一个新窗口并显示指定链接。下面是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
    <title>跳转示例</title>
</head>
<body>
    <button onclick="openNewWindow()">在新窗口打开百度</button>

    <script>
        function openNewWindow() {
            window.open("https://www.baidu.com", "_blank");
        }
    </script>
</body>
</html>

在这个示例中，点击按钮之后会触发 openNewWindow() 函数，然后通过 window.open() 方法在新窗口中打开百度的网页。

window.open() 方法详解

window.open() 方法接受两个参数，第一个参数是要打开的链接地址，第二个参数是窗口的名称或者特性。常用的窗口特性有以下几种：

_blank：在新窗口中打开链接。
_self：在当前窗口中打开链接。
_parent：在父级窗口中打开链接。
_top：在整个窗口中打开链接。

除了这些特性外，我们还可以通过传入一个字符串来自定义窗口的大小和位置，如下所示：

window.open("https://www.baidu.com", "newwindow", "width=500,height=400");

上述代码会在一个大小为 500×400 的窗口中打开百度的网页。

处理弹出窗口被浏览器拦截

有些浏览器会阻止弹出窗口，为了解决这个问题，我们可以在触发事件中调用 window.open() 方法。

<!DOCTYPE html>
<html>
<head>
    <title>跳转示例</title>
</head>
<body>
    <button onclick="openNewWindow()">在新窗口打开百度</button>

    <script>
        function openNewWindow() {
            const newWindow = window.open("https://www.baidu.com", "_blank");
            if (!newWindow || newWindow.closed || typeof newWindow.closed == 'undefined') {
                alert('请允许浏览器弹出窗口！');
            }
        }
    </script>
</body>
</html>

在上述示例中，我们在触发事件中调用 window.open() 方法，并通过判断打开的新窗口是否存在或者已关闭来提示用户允许浏览器弹出新窗口。