Iframeがフォーカスを取得または喪失したとき(つまり、キーボードイベントを受信するかどうか)を検出する正しい方法は何ですか?以下はFx4では機能しません。
var iframe = /* my iframe */;
iframe.addEventListener("focus", function() { /* never gets called */ }, false);
それは実際には不可能であることが判明しました。 iframeにフォーカスがある場合に追跡する必要がないように、ページのロジックを変更する必要がありました。
「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);
});
このソリューションは、モバイルとデスクトップの両方で機能しています。
;(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!');
}
});
})();
これはうまくいくかもしれません
document.addEventListener('click', function(event) {
var frame= document.getElementById("yourFrameID");
var isClickInsideFrame = frame.contains(event.target);
if (!isClickInsideFrame ) {
//exec code
}
});
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
}
}
解決策は、次のように親ページに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);