如何在每次用户离开（window 模糊）然后返回（window 聚焦）时刷新页面？

Question

遇到这个问题。当您离开页面然后返回时，我希望页面刷新。起初我让它适用于 chrome 和 firefox，但不适用于 ie 和 edge。然后我又对它进行了一些调整，让它在边缘工作。即是唯一有问题的。无论我做什么，即进入一个无限循环的刷新。我什至把东西放进去让它只发生一次，比如在 jquery 中使用 "one" 函数，这就是它开始在边缘工作的方式，但即不关心那个规则。然后我尝试了一种散列技术，它只在 url 中没有散列时才这样做，所以它会刷新添加散列，然后下一次加载不会刷新，因为有散列，但这只能工作一次。我无法弄清楚如何重置哈希，以便它可以再次发生。我想出了如何让它每次都反转，所以它在没有哈希时执行它然后下一次在哈希时执行它，但它再次适用于除 ie 之外的所有浏览器。即无限刷新。这是我尝试注释掉的所有代码和所有不同的东西。我不需要它在离开时刷新，只是回来。每次回来。

$(document).one('ready',function(){
$(window).one('load',function(){
 
 $(window).blur(function(e)
 //$(window).one('blur',function(e)
 {
  // Do Blur Actions Here
  console.log('left'); //test
  //if(window.location.hash) {
   // # exists in URL
   //if (typeof window.history.replaceState == 'function') {
    //history.replaceState({}, '', window.location.href.slice(0, -1));
   //}
  //}
 });
 
 $(window).focus(function(e)
 //$(window).one('focus',function(e)
 {
  // Do Focus Actions Here
  console.log('came back'); //test
  
  //if(document.URL.indexOf("#")==-1){ //Check if the current URL contains '#'
   //console.log('no hash');
   //url = document.URL+"#"; // use "#". Add hash to URL
   //location = "#";
   //location.reload(true); //Reload the page
   //console.log(url);
  //}
  //else {
   //console.log('has hash');
   //if (typeof window.history.replaceState == 'function') {
    //if (history.replaceState({}, '', window.location.href.slice(0, -1))){
     //url = document.URL;
     //location.reload(true);
     //console.log(url);
    //}
   //}
  //}
  
  location.reload(true);
  
 });
 
 //$(function(){
  //$(window).bind('blur', function(){
   //console.log('window blur');
  //});

  //$(window).bind('focus', function(){
   //console.log('window focus');
  //});
  
  // IE EVENTS
  //$(document).bind('focusout', function(){
   //console.log('document focusout');
  //});

  //$(document).bind('focusin', function(){
   //console.log('document focusin');
   //location.reload(true);
   //$(document).unbind( "focusin", handler );
   //$(document).unbind( "focusout", handler );
   //$(document).unbind( "blur", handler );
   //$(document).unbind( "focus", handler );
  //});
 //});
 
 //if(window.location.hash) {
  //window.location.href.substr(0, window.location.href.indexOf('#'));
  //window.location.href.split('#')[0];
  //console.log('has hash');
 //}
 //history.pushState("", document.title, window.location.pathname);
 
 // remove fragment as much as it can go without adding an entry in browser history:
 //window.location.replace("#");
 // slice off the remaining '#' in HTML5:    
 //if (typeof window.history.replaceState == 'function') {
  //history.replaceState({}, '', window.location.href.slice(0, -1));
 //}
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

page stuff.

click outside this area then back in this area over and over. that simulates leaving and coming back.

Answer 1

这应该适用于所有浏览器：

window.addEventListener('focus', function(){
    console.log("focus");

});

window.addEventListener('blur', function(){     
    document.location.reload(); 
    console.log('leave');
});

Answer 2

使其适用于以下...

var blurred = false;
window.onblur = function() { blurred = true; };
window.onfocus = function() { blurred && (location.reload()); };

如何在每次用户离开（window 模糊）然后返回（window 聚焦）时刷新页面？

How do I make page refresh happen each time person leaves (window blur) then comes back (window focus)?

javascript

jquery

cross-browser