javascript onblur / onfocus with iframe 无法正常工作的问题

Question

我在页面中使用了 onblur 和 onfocus 功能。而且，我使用 iframe 进入页面。如果我使用 iframe，我的问题是 onblur 和 andfocus 函数不能一起工作到页面中。

我在 iframe 中点击了 onblur 功能 working.But 如果我在 iframe 中点击，我不想让这个功能起作用。我想运行仅在用户更改浏览器选项卡时才起作用

如果我将使用 hasFocus 函数并且用户更改浏览器选项卡，此时 onblur 不起作用

我的js代码：

var after_title = 'Back to page';
var dafault_title = document.title;
var deg;
window.onblur = function () { document.title = after_title; beep(); deg=setTimeout(check,2000); }
window.onfocus = ()=>(deg)?clearTimeout(deg):null;
function beep() {
var snd = new  Audio("data:audio/wav;base64,//uQRAAAAWMSLwUIYAAsYU=");
    snd.play();
}
function check()
{
    if(document.hasFocus()){
        document.title = dafault_title;
        return;
    }else{
        location.href = './index.php';
    }
}

<html>
<head>
<title>Demo Page</title>
</head>
<body>
<br><br><br>default page<br><br><br>
<br><br><br><br>
<iframe id="abc" name="abc" frameborder="1" marginwidth="0" marginheight="0" framespacing="0" width="100px" height="100px">
<p>example include page</p>
  </iframe>
</body>
</html>

Answer 1

为了响应 tabchange，不要使用 blur 和 focus 事件，而是使用 Page Visibility API：

function handleVisibilityChange() {
  if (document.hidden) { // equivalent to "blur"
    document.title = after_title; beep(); deg=setTimeout(check,2000);
  } else  { // equivalent to "focus"
    if (deg) {
      clearTimeout(deg);
    }
  }
}

document.addEventListener("visibilitychange", handleVisibilityChange, false);

javascript onblur / onfocus with iframe 无法正常工作的问题

javascript onblur / onfocus with iframe not working issues

html

javascript

iframe

onfocus

onblur