私はonfocusイベントを使用するhtmlアプリケーションを持っています。これは、ブラウザのタブを切り替えるときに完全に機能しています。iframe（cross-origin）からonfocusイベントにアクセスする方法は？
他のHTMLページにiframeとしてそのアプリケーションを読み込むと、タブを切り替えるときにiframeにフォーカスがないため、機能しません。 onfocusイベントへのアクセス方法iframeトップレベルコードの変更なし。
iframeとiframeを読み込むページが同じ起源ではありません。
if (!window.parent.frames.length) {
window.onfocus = function() {
// do smth
};
} else {
// ???
}
HTML5 Visibility APIを使用できます。ユーザーがいつタブを離れるかを検出することができます。インラインフレームのページの http://caniuse.com/#feat=pagevisibility
サンプルコード：
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');
}
})
を使用すると、親との両方をコントロールしている場合、この機能は、ブラウザの90％でサポートされている - 私はこの記事を書いている時点では
iframeページのコンテンツでは、postMessageを使用して親のonfocusイベントを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に投稿してください。
ここにはJSBin exampleがあります。
はい、これも1つの解決策です。私は 'postMessage'を使用していくつかのイベントを' iframe'（私のアプリ）から親フレームに送り、その部分はオプションです。それは親フレームに余分なデータを提供するだけです。私はプラグインのようにアプリケーションが実装され、時には親の 'onfocus'イベントをiframeに渡すことができないため、@amberのソリューションを使用しました。 –
設定方法を示す最小限のコードを記入してください。 – LGSon
iframeと親ドキュメントの起点が異なることがわかります。両方のドキュメント/起源のコンテンツを制御しますか？ – pseudosavant
これは最低限のコードです。 イベント（ソケット）に基づいていくつかのアニメーションを行っていました。リアルタイムアニメーションでなければならないので、キューが必要でした。タブを切り替えるときに、キューがきれいになり、アプリがiframeでなければ動作していたはずです。しかし、それが 'iframe'のときは' onfocus'イベントが起きないのでキューをクリーンアップできませんでした。 @Amber de Blackの回答が私にとって解決策になるかもしれません。 –