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

发布时间：2023-05-19

一、从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() 方法来实现。
推荐文章