クロムのiframeを含むページにフォーカスを設定する問題

Question

ページの中央にiframeとそのクロスドメインiframeを含むページがあります。ページが読み込まれると、ページのフォーカスがiframeを含むページの中心に移動します。フォーカスがページの上部に移動するようにしようとしています。以下のソリューションはInternet Explorerでのみ動作しますが、chrome/Firefoxでは動作しません。

入力コントロール 'foo'がページの上部にあります。何か案が？それはなぜ私はクロムがぼかしのプロパティに問題があると思いますか？

<iframe width="1200" height="380" id="usageReport" src="https://google.com" frameborder="0" allowfullscreen="true"></iframe> 
<script language="javascript" type="text/javascript"> 
window.onload = function() {    
     $('#foo').on('blur',function() { 
     var blurEl = $(this); 
     setTimeout(function() { 
     blurEl.focus() 
     }, 10); 
     }); 

}; 
</script> 

Answer 1

私はページが読み込まれたら、入力フィールドに集中したいと言っていると思います。

うまくいくかもしれませんが、iframeでわからない、またはHTML5 autofocus属性を入力に追加するだけです。あなたのコードに

https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/autofocus

しかし、この部分$('#foo').on('blur',function() {はリスナーです。だからあなたのコードが言っているのは、ユーザーが入力フィールドからぼかして10ミリ秒待ってから、入力フィールドにフォーカスを合わせるということです。ユーザーがそのフィールドから離れるときにいつでも、それがあなたの望むものであるかどうかはわかりません。再びフォーカスを取得しようとします。あなたは、単にたい：

$(document).ready(function() {    
    setTimeout(function() { 
     $('#foo').focus(); 
    }, 10); 
}); 

私のコードだけでページのロードは、10ミリ秒後に入力に焦点を当てたときに、言います。しかし、本当に、オートフォーカスの方が良いでしょう。 iframeがロードされた後にiframeがそれをキャプチャしている可能性があるので、これはまだ機能しない可能性があります。したがって、iframeが読み込まれた後で実際に起動する必要があります。

ここで説明します。Capture iframe load complete event