如何使用JavaScript处理启动应用程序确认框

Question

我想在浏览器标签页不是焦点时更改我的视图。我使用 window.onblur 事件来处理这种情况，但有一个用例我想要处理。

当启动应用程序确认框出现时，窗口会触发模糊事件，但用户仍然在页面上，所以我不想在页面上更改视图。只有当用户切换不同的窗口或选项卡时，我才应该更改视图。

启动应用程序确认框的示例。

我已经搜索了启动应用程序确认事件以及窗口、导航器和文档对象中的相关对象，函数或事件，但是没有找到任何相关内容。此外，我还在MDN上搜索了特定的API来解决这个问题，但是我没有找到任何解决方案。

如果您知道有关启动确认框的任何文档，请分享给我。我会非常感激任何能够从另一个角度解决我的问题的帮助。

- Ozan Batuhan Ceylan

Answer 1

这个问题可以通过处理 visibilitychange 事件来解决，而不是像下面这样处理 blur 事件。

document.addEventListener("visibilitychange", function() {
    //Change your view here
});

更多关于这里的细节。请注意，也有特定于浏览器的事件。

"visibilitychange"
"msvisibilitychange"
"webkitvisibilitychange"

如果您希望处理用户在浏览器外单击但仍保持网站可见时的情况，可以使用blur事件处理。

但现在，需要特别处理“启动应用程序弹出窗口”，它也会模糊窗口，但不会触发任何事件以进行处理。

我们可以快速解决这个问题。
这个想法基于以下两种行为：

1. 启动此弹出窗口的链接不会以http或https开头。例如，zoom使用以zoommtg://开头的URL来启动本机应用程序。
2. onclick事件在onblur事件之前触发。

因此，在click事件上引入一个标志将有助于我们处理此弹出窗口。

changeViewFlag=true;

window.onblur=function(event){
        if(changeViewFlag==true)
        {
            //Change your view here
        } 
        changeViewFlag=true;
    }

window.onclick=function(event){
        if(event.target.href!=null &&
           event.target.href.split("://").length>1 &&
           ["http","https"].indexOf(event.target.href.split("://")[0])==-1)
           {
             changeViewFlag=false;
           }
    }

- Liju

---

谢谢你的回答。可见性更改事件将涵盖主要功能，但有一个特殊情况。如果用户使用多个显示器或小型浏览器窗口，则浏览器将不会触发可见性更改事件。我也应该考虑到这种情况。 - Ozan Batuhan Ceylan

@OzanBatuhanCeylan 我已经更新了答案，请查看。 - Liju

这个解决方法可以解决问题，但在实际应用中，管理应用程序范围内的这些事件太困难了。因此，我需要更多封装的解决方案。 - Ozan Batuhan Ceylan