Javascript 关闭窗口

Question

我在 page_a.php 中有一个链接，它使用 target="_blank" 在新选项卡中打开。

 <a href="page_b.php" target="_blank">Open Page B</a>

在页面 B 中，我有一个脚本，一旦用户不再查看它，它就会自动关闭选项卡/窗口。我的脚本如下所示:

<script type="text/javascript">
    function handleVisibilityChange() {
      if (document.visibilityState == "hidden") {
        window.close();
        console.log("hidden");
      } else {
        console.log("shown");
      }
    }
    document.addEventListener('visibilitychange', handleVisibilityChange, false);
</script>

所以我有:

 localhost/test/page_a.php //loads jQuery
 localhost/test/page_b.php //doesn't load jQuery

在 page_b.php 上我收到警告:

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

因为我实际上是打开 window 的人，有没有办法让它工作？

Answer 1

窗口必须是用 JavaScript 的 window.open() 打开的, 不带 <a href="..." target="...">关联。参见 window.close() 文档以获取更多详细信息。

例如，一种方法是监听 click链接上的事件，阻止默认操作，然后使用 JavaScript 显式打开窗口:

<script type="text/javascript">
  // wait for the DOM to have loaded
  document.addEventListener( 'DOMContentLoaded', function( e ) {
    let link = document.querySelector( 'some selector to get the proper link element' );
    link.addEventListener( 'click', function( e ) {
      // prevent window opening regularly
      e.preventDefault();
      // explicitly open with JavaScript
      window.open( this.href, 'MyNewWindow' );
    } );
  } );
</script>

虽然这可能存在问题:

1. 您的用户可能已将他们的浏览器配置为阻止打开新窗口。

2. 如果用户访问 page_b.php通过单击您的链接以外的其他方式，关闭窗口也不起作用。您必须使用 window.opener 显式测试该窗口是否被您的其他窗口打开。 :

   <script type="text/javascript">
     /*
        ...
     */
     // if this window has a reference to the window that opened this window
     if( window.opener ) {
       document.addEventListener('visibilitychange', handleVisibilityChange, false);
     }
   </script>
   

   但是正如您在文档中看到的那样，window.opener也有自己的问题。