javascript onblur / onfocus与iframe不起作用问题

问题描述 投票:0回答:1

我在页面中使用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>
javascript html iframe onblur onfocus
1个回答
0
投票

为了对tabchange做出反应,请不要使用blurfocus事件,而要使用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);
© www.soinside.com 2019 - 2024. All rights reserved.