55

イベント ハンドラーを含むページがあり、document.onkeydownそれを別のページの iframe 内に読み込んでいます。コンテンツページで「リスニング」を開始するには、iframe 内をクリックする必要があります。

iframe 内をクリックする必要がないように、外側のページで JavaScript を使用して内側のページにフォーカスを設定する方法はありますか?

編集: コメントへの応答:

コンテキストは、メイン ウィンドウがライト ボックスのようなシステムであるということです。ただし、写真の代わりに iframe が表示され、各 iframe は keydown/mousemove ハンドラーを備えたインタラクティブなページです。これらのハンドラーは、ライトボックスのものを表示した後、iframe をクリックするまで起動しません。

私は実際には、「iframe contentDocument でイベント ハンドラーを有効にする」ほど伝統的な意味で「setFocus」を探しているわけではありません。

4

8 に答える 8

69

jQuery Thickbox (ライトボックス スタイルのダイアログ ウィジェット) でも同様の問題がありました。私の問題を修正した方法は次のとおりです。

function setFocusThickboxIframe() {
    var iframe = $("#TB_iframeContent")[0];
    iframe.contentWindow.focus();
}

$(document).ready(function(){
   $("#id_cmd_open").click(function(){
      /*
         run thickbox code here to open lightbox,
         like tb_show("google this!", "http://www.google.com");
       */
      setTimeout(setFocusThickboxIframe, 100);
      return false;
   });
});

コードは setTimeout() なしでは機能しないようです。私のテストでは、Firefox3.5、Safari4、Chrome4、IE7、IE6 で動作します。

于 2010-01-15T09:13:22.057 に答える
27

contentWindow.focus() メソッドを使用すると、iframe が完全にロードされるのを待つためにタイムアウトが必要になる可能性があります。

私にとって、属性を使用するonload="this.contentWindow.focus()"と、firefox で iframe タグにも使用できます

于 2010-07-16T11:07:05.650 に答える
10 
document.getElementsByName("iframe_name")[0].contentWindow.document.body.focus();
于 2008-12-15T17:04:34.503 に答える
3

別のページからロードされた iframe の txt 領域に焦点を当てようとしていた同様の問題がありました。ほとんどの場合、機能します。iFrame がロードされたときに、表示される前に FF で起動するという問題がありました。そのため、フォーカスが正しく設定されていないようです。

上記のcheemingの答えに対する類似の解決策でこれを回避しました

    var iframeID = document.getElementById("modalIFrame"); 
//focus the IFRAME element 
$(iframeID).focus(); 
//use JQuery to find the control in the IFRAME and set focus 
$(iframeID).contents().find("#emailTxt").focus();
于 2012-11-19T20:53:13.140 に答える
1

FF が iframe.contentWindow のフォーカス イベントをトリガーするが、iframe.contentWindow.document のフォーカス イベントをトリガーしないことを発見しました。たとえば、Chrome は両方のケースを処理できます。そのため、イベント ハンドラーを iframe.contentWindow にバインドして、機能させる必要がありました。多分これは誰かを助ける...

于 2012-09-26T12:52:53.440 に答える
1

jQuery を使用して iframe を作成し、それをドキュメントに追加し、読み込まれるまでポーリングしてからフォーカスするコードを次に示します。これは、iframe の読み込みにかかる時間によって機能する場合と機能しない場合がある任意のタイムアウトを設定するよりも優れています。

var jqueryIframe = $('<iframe>', {
    src: "http://example.com"
}),
focusWhenReady = function(){
    var iframe = jqueryIframe[0],
    doc = iframe.contentDocument || iframe.contentWindow.document;
    if (doc.readyState == "complete") {
        iframe.contentWindow.focus();
    } else {
        setTimeout(focusWhenReady, 100)
    }
}
$(document).append(jqueryIframe);
setTimeout(focusWhenReady, 10);

iframe がいつロードされるかを検出するためのコードは、iframe がロードされているか、またはコンテンツがあるかを確認する方法に対するBiranchiの回答から適応されました。

于 2015-04-13T18:49:42.523 に答える
0

少し間違った匂いがしますが、これは私にとってはうまくいったものです：

var iframe = ...
var doc = iframe.contentDocument;

var i = doc.createElement('input');
i.style.display = 'none'; 
doc.body.appendChild(i);
i.focus();
doc.body.removeChild(i);

うーん。また、コンテンツの一番下までスクロールします。上部にダミーのテキストボックスを挿入する必要があると思います。

于 2008-12-18T00:58:48.587 に答える