Question

我将我的真实案例最小化为一个小例子。

我想要实现的是捕获文档可见性更改事件。

当我通过在浏览器标签之间切换来更改可见性时，我发现它有效，但是当我以编程方式更改可见性时，它不起作用。

所以这是一个demo - 要检查它只是转到另一个浏览器标签，您将在控制台中看到一些消息，但是，如果您点击hide按钮，这也会改变可见性 - 它不起作用。

顺便说一句，我真的需要处理可见性事件。

在我的真实案例中，可见性由某些外部框架（在html选项卡之间切换时）更改。

我无法捕捉标签点击，因为标签可能会嵌套。

所以，我唯一需要的是文档可见性事件。

如果演示不可用，这是一个最小化的代码

<button onclick="hideIt()">Hide</button>
<iframe id="one"></iframe>
<script>
    var doc = document.getElementById('one').contentWindow.document;
    doc.open();
    doc.write('<html><head><title></title></head><body>'+
    'One.' +
    '</body></html>');

    doc.addEventListener('visibilitychange', function(e) {
        console.log('hidden:' + doc.hidden,
                    'state:' + doc.visibilityState)
    }, false);

    doc.close();

    function hideIt() {
         var iframe1 = document.getElementById("one");
         iframe1.style.display = "none";
         //iframe is not visible and its internal document as well, but
         //visibilitychange event is not fired
    }
</script>

那么，我该如何解决呢？

Answer 1

根据https://www.w3.org/TR/page-visibility/#sec-visibilitychange-event

用户代理必须在Document上触发visibilitychange事件 当用户代理确定文档的可见性时 顶级浏览上下文所包含的内容已更改。

iframe不是顶级浏览上下文，因此不会触发事件。此外，只有在用户代理确定该事件时才会触发该事件。此表列出了许多触发事件的操作：

https://github.com/w3c/page-visibility/issues/18#issuecomment-154187852

如果您只需要处理visibilitychange事件，则无法解决问题。但是，通过将按钮单击和visibilitychange事件绑定到同一功能，可以实现相同的最终目标。例如：

<VirtualHost *:80>
    ServerAdmin webmaster@localhost

    DocumentRoot /var/www
    <Directory />
        Options FollowSymLinks
        AllowOverride All                                 <- HERE
    </Directory>
    <Directory /var/www/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride All                                 <- HERE
        Order allow,deny
        allow from all
    </Directory>

    ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
    <Directory "/usr/lib/cgi-bin">
        AllowOverride None
        Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
        Order allow,deny
        Allow from all
    </Directory>

    ErrorLog ${APACHE_LOG_DIR}/error.log

    # Possible values include: debug, info, notice, warn, error, crit,
    # alert, emerg.
    LogLevel warn

    CustomLog ${APACHE_LOG_DIR}/access.log combined

    Alias /doc/ "/usr/share/doc/"
    <Directory "/usr/share/doc/">
        Options Indexes MultiViews FollowSymLinks
        AllowOverride None
        Order deny,allow
        Deny from all
        Allow from 127.0.0.0/255.0.0.0 ::1/128
    </Directory>

</VirtualHost>

当可见性以编程方式更改时，记录visibility visibility事件

1 个答案: