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 我收到警告：

脚本只能关闭它打开的窗口。

既然我实际上是打开窗户的人，有没有办法让它工作？

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 也有其自身的问题。