zoukankan      html  css  js  c++  java
  • 实现自动关闭当前页面的效果

    场景

    以前见到过一个当你保存某表单成功后,显示倒计时并自动关闭页面的效果,现在终于轮到我来实现了。

    不过这有何好说,直接调用下面的代码不就关闭了么?

    window.close()
    

    然而,在最新的 chrome 浏览器上写上却是显示一个警告并且代码并不生效。

    Scripts may close only the windows that were opened by it.
    

    翻了好多资料却都于事无补。

    close函数的限制

    上面出现的警告信息我在 stackoverflow 上看到有人回答

    If your script did not initiate opening the window (with something like window.open), then the script in that window is not allowed to close it. Its a security to prevent a website taking control of your browser and closing windows.

    简而言之,window.close() 是有限制的,window.open 会返回一个对象,这个对象就是打开的新页面的 window 对象,

    在 pageA 中写入

    let pageB = window.open('xxx pageB');
    pageB.close();
    

    这就可以看见关闭了新打开的 pageB 页面。

    跨页面通信

    然而我们在前一个页面却不知道下一个页面的变化,比如上面例子我们不知道新打开的 pageB 页面到底做了什么,pageA 页面就不知道何时才能关闭 pageB。

    这时候就需要用上 postMessage 跨页面通信。

    在 pageA 上写上监听

    window.addEventListener('message', (event) => {
        console.log('this is a message');
    }, false);
    

    在 pageB 上可以发送 postMessage

    window.opener.postMessage('close', '*');
    

    在 pageA 上打开 pageB 后就能在控制台上看到 pageA 控制台打印出了 this is a message

    完整代码

    pageA

    window.addEventListener('message', (event) => {
        if (event.data === 'close') {
            event.source.top.close();
        }
    }, false);
    

    pageB

    window.top.opener.postMessage('close', '*');
    

    当然,如果考虑 iframe 中会比较复杂,所以才用了 window.top。

  • 相关阅读:
    AC自动机模板
    HDU 3065 病毒侵袭持续中(AC自动机)
    HDU 2896 病毒侵袭(AC自动机)
    HDU 2222 Keywords Search (AC自动机模板题)
    HDU 1113 Word Amalgamation
    HDU 1171 Big Event in HDU(母函数或01背包)
    37.Qt网络与通信
    2.Matlab数值数组及其运算
    36.QT地图
    35.QT蝴蝶飞舞
  • 原文地址:https://www.cnblogs.com/everlose/p/12541853.html
Copyright © 2011-2022 走看看