我在页面中使用onblur和onfocus函数。而且,我使用iframe进入页面。而且我的问题是,如果使用iframe,onblur和andfocus函数无法一起工作到页面中。
我在onblur函数起作用时单击了iframe。但是,如果我在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>
为了对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);