Guide change identification

Question

Guide change identification

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

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

javascript html5

asked by anonymous 06.06.2017 / 16:21

2 answers

ExpandableListView items clickable Bar graph with relative and accumulated frequency

score 1 · Answer 1

Yes, you can use Page Visibility API to do this. It's quite simple that you can bind a document event and it will be triggered when the user changes the tab. Look at this very simple code I've done 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 very simple and detects when the user left, when this happens write the string Left my page: (.

Just add visibilitychange and then check the visibilityState attribute of document . It can have the following returns:

visible: The content of the page can be at least partially visible. In practice, this means that the page is the foreground tab of a non-minimized window.
hidden: The content of the page is not visible to the user. In practice, this means that the document is a background guide or part of a minimized window, or the OS screen lock is active.
prerender: The content of the page is being rendered and is not visible to the user (considered hidden for document.hidden purposes). The document can start in this state, but it will never transition to 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 that returns true or false. Being true when the tab of your page is active or false otherwise.

Example of using document.hidden .

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

I hope I have helped, for more details see: link

score 0 · Answer 2

___ erkimt ___ Guide change identification ______ qstntxt ___

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

______ azszpr210637 ___

Yes, you can use Page Visibility API to do this. It's quite simple that you can bind a document event and it will be triggered when the user changes the tab. Look at this very simple code I've done to exemplify:

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

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

This is very simple and detects when the user left, when this happens write the string Left my page: (.

Just add visibilitychange and then check the visibilityState attribute of document . It can have the following returns:

visible: The content of the page can be at least partially visible. In practice, this means that the page is the foreground tab of a non-minimized window.
hidden: The content of the page is not visible to the user. In practice, this means that the document is a background guide or part of a minimized window, or the OS screen lock is active.
prerender: The content of the page is being rendered and is not visible to the user (considered hidden for document.hidden purposes). The document can start in this state, but it will never transition to 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 that returns true or false. Being true when the tab of your page is active or false otherwise.

Example of using document.hidden .

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];
    }
})();

I hope I have helped, for more details see: link

______ ___ azszpr210626

I think to verify that the tab is active only with pro browser plugins, but alternatively you can use the% focus window events:

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

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

As it is said in this OS response in English .

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

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

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

Usage:

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];
    }
})();

___