如何在PHP中打开的选项卡上的活动页面中检查此页面

Question

In instagram while you opened and looking someone story it has a timeout until goes to next story, but when you changing browser tab it stops and when you back it goes from where you left page. sorry for my bad English I hope you have got it.

So how can I do that in php, I want to stop a countdown when user leaves the tab.

Answer 1

You can use the following function to get when the user leaves

$(window).blur(function(e) {
    // What to do when user leaves
});

And then this other to get when the user returns

$(window).focus(function(e) {
    // What to do when user comes back
});

Use it on ready because it will automatically trigger the focus function, and it can throw errors if the DOM isn't loaded yet. Also remember to prepare it to don't do anything you do on focus at first time, except it isn't a problem.

Answer 2

Here is an example how to keep your animations in sync when browser tab is changed .

You could use the same approach to pause/resume your story timeout when current browser tab is in/active using HTML 5 visibility API like so:

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

Live preview on codepen: https://codepen.io/jonathan/pen/sxgJl