您的位置:

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() 方法来实现。

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

2023-05-19
JS关闭当前窗口

2023-05-18
JS关闭当前页面

2023-05-18
印象笔记记录java学习(Java成长笔记)

2022-11-12
java方法整理笔记(java总结)

2022-11-08
超nb的网页标签弹窗js代码(超nb的网页标签弹窗js代码是

本文目录一览: 1、有一段非常NB的JS代码 2、网页弹出个框框源码 3、怎样通过js做一个无限弹窗的网页 有一段非常NB的JS代码 首先不说你理解不理解的问题,这段代码本身就写得很烂……这种css和

2023-12-08
java学习笔记(java初学笔记)

2022-11-14
HTML5中关闭当前页面的常用方法

2023-05-23
js打印当前网页,如何打印当前网页

本文目录一览: 1、如何用js实现打印当前页面隐藏的内容?(注:只显示打印按钮,不显示打印内容。) 2、网页打印问题:用javascript调用print()打印网页,打印的时候会缩放,这样打印的效果

2023-12-08
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
JS关闭浏览器详解

2023-05-17
重学java笔记,java笔记总结

2022-11-23
关于已前的学习笔记java的信息

2022-11-18
如何快速关闭当前页面

2023-05-20
java笔记,尚硅谷java笔记

2022-12-01
js高级程序设计笔记14(js高级程序设计笔记14页)

本文目录一览: 1、JavaScript高级程序设计 该怎么看 2、JavaScript学习笔记之数组基本操作示例 3、JS中有关sort以及return的问题 JavaScript高级程序设计 该怎

2023-12-08
java笔记,大学java笔记

2022-11-28
js判断浏览器窗口关闭,js中关闭窗口的方法

2022-12-01
chrome标签页js,Chrome标签页插件

2022-11-25
php刷新当前页面,php关闭当前页面

2022-11-25