JS关闭当前标签页的多方面阐述

一、从JS关闭当前标签页的实现方法谈起

要实现关闭当前标签页的功能，我们需要使用 window.close() 方法。这个方法可以直接关闭当前的标签页。在一些老版本的浏览器中，由于安全限制，这个方法并不是完全管用。比如在 Edge 中就无法使用该方法关闭标签页。

由于效果不稳定，因此我们需要检测当前的浏览器是否支持该功能，以便在其不支持时，能够选择其他的关闭方式。一个比较通用的解决方案是，当 window.close() 方法无法使用时，将当前标签页的地址修改为一个不真实存在的地址，从而让当前标签页显示出“无法访问该网页”的提示，以达到关闭标签页的效果。

    function closeWindow() {
        var userAgent = navigator.userAgent.toLowerCase();
        var isEdge = userAgent.indexOf('edge') !== -1;
        if (window.close && !isEdge) {
            window.close();
        } else {
            window.location.href = 'about:blank';
            window.opener = null;
            window.close();
        }
    }

二、手机浏览器中的JS关闭当前标签页

在手机端，关闭标签页的效果也是比较常见的需求。然而，与 PC 端不同的是，手机端的浏览器往往并不支持 window.close() 方法。在这种情况下，我们可以尝试使用一些其他的方法来关闭当前标签页。

一种比较通用的解决方案是，向当前标签页发送一条消息，在消息处理函数中调用 window.close() 方法来关闭该标签页。代码如下：

    window.addEventListener("message", function (e) {
        if (e.data === "close" && e.origin === window.location.origin) {
            window.close();
        }
    });

在另一个页面中，我们可以使用 JavaScript 来向当前标签页发送一条消息，以触发上述的关闭方法：

    window.opener.postMessage("close", window.location.origin);

三、如何在a标签的点击事件中实现JS关闭页面

我们也可以通过点击 a 标签的方式来触发 JavaScript 关闭当前标签页的方法。在这种情况下，我们需要使用 JavaScript 来拦截 a 标签的默认行为，并在点击事件处理函数中来实现标签页的关闭：

    var links = document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
        var link = links[i];
        link.addEventListener('click', function (event) {
            event.preventDefault();
            var target = event.target || event.srcElement;
            var href = target.href || 'about:blank';
            window.location.href = href;
        });
    }

在上述代码中，我们通过 event.preventDefault() 的方法来阻止默认行为的触发。并使用 window.location.href 的方法来实现标签页的关闭。

四、JS关闭其他标签页的实现方法

有时候，我们需要关闭打开的所有标签页中，除了当前标签页之外的所有标签页。这时，我们可以使用 JavaScript 中的 window.open() 方法来打开新的标签页，并为每个标签页设置一个唯一的标识符。然后，我们可以通过 window.close() 方法来逐个关闭所有的标签页。

    var windows = [];
    function openWindow(url) {
        var win = window.open(url);
        var id = setInterval(function () {
            if (win.closed) {
                clearInterval(id);
                windows.splice(windows.indexOf(win), 1);
            }
        }, 1000);
        windows.push(win);
    }

    function closeOtherWindows() {
        windows.forEach(function (win) {
            if (win !== window) {
                win.close();
            }
        });
    }

在上述代码中，我们为每个标签页设置了一个唯一的 id，并使用 setInterval() 方法来定时检测标签页是否已经关闭。在 window.close() 方法被调用时，该标签页将从 window 数组中移除。

五、使用JS关闭标签页的注意事项

由于浏览器安全限制的原因，我们在使用 window.close() 方法时需要遵循一些注意事项：

1. window.close() 方法只能关闭被 JavaScript 打开的标签页或者窗口。如果标签页是通过用户手动打开的，那么该标签页将不能被关闭。

2. window.close() 方法只能关闭由当前脚本打开的标签页或者窗口。一旦脚本执行了 window.close() 方法，该标签页就立即关闭了。如果脚本在执行期间跳转到了其他页面，那么 window.close() 方法将无效。

3. window.close() 方法会被弹出窗口的 blockers 拦截。因此，如果要打开一个新的标签页，我们最好通过 a 标签或者 window.open() 方法来实现。

原创文章，作者：VCKD，如若转载，请注明出处：https://www.506064.com/n/147507.html