Identification of guide exchange

Asked

Viewed 1,591 times

1

As you know, when a user accesses the internet he will always want to access several tabs at the same time, youtube, facebook, email, etc., he gets a tab being viewed while the others are at his disposal. I wonder if there is the possibility of the code identify when the user is with the tab of our site viewed and when it is only as tab in the browser.

javascript html5

2 answers

1

Yes, to do that you can use Page Visibility API. It’s quite simple you can link an event of the Document and it will be triggered when the user changes tab. See this very simple code I did to exemplify :

<!DOCTYPE html>
<html>
<head>
	<title>Visible</title>
	<meta charset="utf-8">
</head>
<body>

<script type="text/javascript">
	
document.addEventListener("DOMContentLoaded", function(){
	document.addEventListener("visibilitychange", function() {
	  if( document.visibilityState == 'hidden'){
	  	document.body.innerHTML = "Saiu da minha página :(";
	  }
	});
});

</script>

</body>
</html>

This is quite simple and detects when the user left, when this happens writes the string Got off my page :(.

Just add the visibilitychange and hence verify the attribute visibilityState of Document. He can have the following returns :

  • Visible : Page content can be at least partially visible. In practice, this means that the page is the foreground tab of a window not minimized.
  • Hidden : Page content is not visible to the user. In practice, this means that the document is a background tab or part of a minimized window, or the OS screen lock is active.
  • prerender : Page content is being rendered and is not visible to the user (considered hidden for Document.Hidden purposes). The document can start in this state, but will never pass to it of another value. Note: browser support is optional.
  • unloaded : The page is being downloaded from memory. Note: browser support is optional.

You can also in a more direct way use the Document.Hidden which returns true or false. True when your page tab is active or false otherwise.

Example of the use of Document.Hidden.

document.addEventListener("DOMContentLoaded", function(){
	document.addEventListener("visibilitychange", function() {
	  if(document.hidden){
	  	document.body.innerText = "Volte :(";
	  }
	});
});

I hope to have helped, for more details see : https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API

0

I think to check if the tab is active, only with pro browser plugins, but alternatively, you can use the events of focus window:

var interval_id;
$(window).focus(function() {
    if (!interval_id)
        interval_id = setInterval(hard_work, 1000);
});

$(window).blur(function() {
    clearInterval(interval_id);
    interval_id = 0;
});

As it is said in that OS response in English.

Another alternative is to use the visibility API, which works more or less as follows:

var vis = (function(){
    var stateKey, eventKey, keys = {
        hidden: "visibilitychange",
        webkitHidden: "webkitvisibilitychange",
        mozHidden: "mozvisibilitychange",
        msHidden: "msvisibilitychange"
    };
    for (stateKey in keys) {
        if (stateKey in document) {
            eventKey = keys[stateKey];
            break;
        }
    }
    return function(c) {
        if (c) document.addEventListener(eventKey, c);
        return !document[stateKey];
    }
})();

Use:

var visible = vis(); // dá o estado atual da aba

vis(aFunction);      // define um event handler para a troca de visibilidade

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.