How to handle launch application confirm box with javascript

Question

I want to change my view when the browser tab is not focused. I used window.onblur event to handle this situation but there is one use case that I want to handle.

When the launch application confirm box appears window fires blur event but the user still is in the page so that i don't want to change the view on page. I should change the view only when the user switch different window or tab.

Example for Launch Application Confirm Box

I've searched for launch application confirm's events and also object in window, navigator and document objects but i did not find any related object, function or event. Also I've searched mdn for specific API to achieve this, but I could not find any solution to this problem.

If you know any documentation about launch confirm box please share with. I would appreciate for any help that will solve my use case with another point of view.

Answer 1

This can be solved by handling visibilitychange event instead of blur as below.

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

More details on here. Please note there are browser specific events too.

"visibilitychange"
"msvisibilitychange"
"webkitvisibilitychange"

In case, you want to handle the situation when user clicks out of browser keeping the site visible, as well. Handle blur event instead.

But now, 'launch application pop-up' which also blurs the window, to be handled specifically. It does not fire any event to handle

we can have a quick work around to handle it.
The idea is based on below 2 behaviors,

1. The link that fires this popup, will not start with http or https. for example, zoom uses url that starts with zoommtg:// to launch native application.
2. onclick events fired before onblur event.

Hence, Introducing a flag on click event, will help us handle this popup.

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;
           }
    }