我有使用onfocus事件的html应用。切换浏览器标签时，它可以正常工作。
现在，当我在另一个html页面中将该应用加载为iframe时，它无法正常工作，因为切换标签时iframe没有聚焦。如何在不修改顶级代码的情况下从onfocus 访问iframe个活动。
加载iframe的iframe和页面不是来自同一个来源。
if (!window.parent.frames.length) {
window.onfocus = function () {
// do smth
};
} else {
// ???
}
答案 0 :(得分：4)
您可以使用HTML5 Visibility API。它允许您检测用户何时离开并返回选项卡。
在我写这篇文章的那一刻 - 这个功能得到了90％的浏览器的支持： http://caniuse.com/#feat=pagevisibility
iframe页面的示例代码：
document.addEventListener('visibilitychange', function(){
var time = new Date();
if (document.hidden) {
console.log(time + ' the user has left tab');
} else {
console.log(time + ' the user has returned to the tab');
}
})
答案 1 :(得分：1)
如果您同时控制父页面和iframe页面的内容，则可以使用postMessage将父级onfocus事件传递到iframe。
以下是一个例子：
<iframe>内容：<!doctype html>
<html>
<head>
<script>
// Function to call when receiving a `postMessage`
function listener(event){
if (event.data === 'focus-event') {
document.querySelector("body").innerHTML += '<h2>Parent is in focus</h2>';
}
};
// `postMessage` event listener
window.addEventListener('message', listener, false);
</script>
</head>
<body>
<h1>Child</h1>
</body>
</html>;
window.addEventListener('focus', function(event){
iframe.postMessage('focus-event', '*');
}, false);
这将使得每次父窗口收到focus事件时，它都会将该消息发布到iframe。