检测 iframe 何时获得或失去焦点（即是否会接收键盘事件）的正确方法是什么？以下内容在 Fx4 中不起作用：
var iframe = /* my iframe */;
iframe.addEventListener("focus", function() { /* never gets called */ }, false);
您可以轮询“document.activeElement”以确定它是否与 iframe 匹配。轮询并不理想，但它有效：
function checkFocus() {
if(document.activeElement == document.getElementsByTagName("iframe")[0]) {
console.log('iframe has focus');
} else {
console.log('iframe not focused');
}
}
window.setInterval(checkFocus, 1000);
我知道它很旧，但我也遇到了同样的问题。
我最终使用了这段小代码：
$(document).on('focusout', function(){
setTimeout(function(){
// using the 'setTimout' to let the event pass the run loop
if (document.activeElement instanceof HTMLIFrameElement) {
// Do your logic here..
}
},0);
});
事实证明这根本不可能。我必须更改页面的逻辑，以避免在 iframe 具有焦点时进行跟踪。
注意：我强烈建议您不要选择轮询方法，而采用诸如此类的事件驱动方法。
无法直接在 iframe 上使用
focusblurwindowdocument.activeElement虽然现在已经是 2018 年了，但我的代码正在 GTM 中实现，并尝试跨浏览器兼容回 IE 11。这意味着如果您使用更新的 ES/ECMAScript 功能，代码会更高效。
我将进一步采取几个步骤来表明我们还可以获取 iframe 的
src理想情况下，您需要将其放入文档就绪事件中，或者至少将其封装起来，以便变量不是全局的[也许使用 IIFE]。我没有将其包装在准备好的文档中，因为它是由 GTM 处理的。它还可能取决于您将其放置在何处或如何加载它，例如在页脚中。
https://jsfiddle.net/9285tbsm/9/
我在 JSFiddle 预览中注意到它已经是一个 iframe，有时您必须在事件开始捕获之前先将其聚焦。其他问题可能是您的浏览器窗口尚未聚焦。
// Helpers
var iframeClickedLast;
function eventFromIframe(event) {
var el = event.target;
return el && el.tagName && el.tagName.toLowerCase() == 'iframe';
}
function getIframeSrc(event) {
var el = event.target;
return eventFromIframe(event) ? el.getAttribute('src') : '';
}
// Events
function windowBlurred(e) {
var el = document.activeElement;
if (el.tagName.toLowerCase() == 'iframe') {
console.log('Blurred: iframe CLICKED ON', 'SRC:', el.getAttribute('src'), e);
iframeClickedLast = true;
}
else {
console.log('Blurred', e);
}
}
function windowFocussed(e) {
if (iframeClickedLast) {
var el = document.activeElement;
iframeClickedLast = false;
console.log('Focussed: iframe CLICKED OFF', 'SRC:', el.getAttribute('src'), e);
}
else {
console.log('Focussed', e);
}
}
function iframeMouseOver(e) {
console.log('Mouse Over', 'SRC:', getIframeSrc(e), e);
}
function iframeMouseOut(e) {
console.log('Mouse Out', 'SRC:', getIframeSrc(e), e);
}
// Attach Events
window.addEventListener('focus', windowFocussed, true);
window.addEventListener('blur', windowBlurred, true);
var iframes = document.getElementsByTagName("iframe");
for (var i = 0; i < iframes.length; i++) {
iframes[i].addEventListener('mouseover', iframeMouseOver, true);
iframes[i].addEventListener('mouseout', iframeMouseOut, true);
}
我通过使用
contentWindowcontentDocumentcontentWindowactiveElementsetIntervaladdEventListenerlet iframe = document.getElementsByTagName("iframe")[0];
// or whatever way you do to grab that iFrame, say you have an `id`, then it's even more precise
if(iframe){
iframeWindow = iframe.contentWindow;
iframeWindow.addEventListener('focus', handleIframeFocused);
iframeWindow.addEventListener('blur', handleIframeBlurred);
}
function handleIframeFocused(){
console.log('iframe focused');
// Additional logic that you need to implement here when focused
}
function handleIframeBlurred(){
console.log('iframe blurred');
// Additional logic that you need to implement here when blurred
}
这个解决方案在移动设备和桌面上都适用于我：
;(function pollForIframe() {
var myIframe = document.querySelector('#my_iframe');
if (!myIframe) return setTimeout(pollForIframe, 50);
window.addEventListener('blur', function () {
if (document.activeElement == myIframe) {
console.log('myIframe clicked!');
}
});
})();
解决方案是在父页面上注入一个 javascript 事件，如下所示：
var script = document.createElement('script');
script.type = 'text/javascript';
script.innerHTML =
"document.addEventListener('click', function()" +
"{ if(document.getElementById('iframe')) {" +
// What you want
"}});";
head.appendChild(script);
一个紧凑的函数，接受您想要在 iframe 获得或失去焦点时运行的回调。
/* eslint-disable no-unused-vars */
export default function watchIframeFocus(onFocus, onBlur) {
let iframeClickedLast;
function windowBlurred(e) {
const el = document.activeElement;
if (el.tagName.toLowerCase() == 'iframe') {
iframeClickedLast = true;
onFocus();
}
}
function windowFocussed(e) {
if (iframeClickedLast) {
iframeClickedLast = false;
onBlur();
}
}
window.addEventListener('focus', windowFocussed, true);
window.addEventListener('blur', windowBlurred, true);
}
这是检测 iframe 何时获得或失去焦点的代码
// This code can be used to verify Iframe gets focus/loses.
function CheckFocus(){
if (document.activeElement.id == $(':focus').context.activeElement.id) {
// here do something
} else {
//do something
}
}
我最近遇到了一种情况，我需要检测页面上的许多 iframe 之一何时接收或失去焦点。 iframe 的内容来自不同的域，我对它们的控制权为零。
我首先尝试了一种方法，该方法依赖于向主窗口添加“模糊”和“焦点”事件的事件侦听器，用零计时器触发函数调用，然后检查
document.activeElement我不明白为什么，但在 iOS 上的 Safari 和 Chrome 上，主窗口“模糊”事件只会发出一次。之后它就停止工作了。
我可以让代码在所有平台上工作的唯一方法是切换到基于计时器的方法，在该方法中，我每 300 毫秒将
document.activeElement我希望这可以节省一些人的时间，因为我最终浪费了很多时间尝试在 Windows 电脑上调试 iOS 问题。
这可能有用
document.addEventListener('click', function(event) {
var frame= document.getElementById("yourFrameID");
var isClickInsideFrame = frame.contains(event.target);
if (!isClickInsideFrame ) {
//exec code
}
});