將焦點設置爲iframe內容

我有一個頁面，其中包含一個document.onkeydown事件處理函數，我將它加載到另一個頁面的iframe中。我必須點擊iframe內部才能讓內容頁面開始「聆聽」。將焦點設置爲iframe內容

有沒有什麼方法可以在外部頁面中使用JavaScript將焦點設置爲內部頁面，所以我不必點擊iframe內？

編輯：響應於評價：

上下文是主窗口是光盒狀系統，不同之處，而不是圖片，它顯示了內部框架，並且每個iframe是與KEYDOWN /鼠標移動處理程序的交互式頁。這些處理程序不會觸發，直到我在顯示燈箱後點擊iframe。

我實際上並不希望在傳統意義不亞於「啓用iframe的contentDocument事件處理程序」

來源

2008-12-15 Jimmy

檢測的代碼，你可以提供更多的背景？您是在主窗口中輸入內容並希望文本在iframe中以某種形式出現？這是相關的，因爲在iframe中設置焦點會干擾在主窗口中輸入的用戶。 – cLFlaVA 2008-12-15 17:08:01

我有一個jQuery Thickbox（一個lightbox風格的對話框小部件）類似的問題。我修復我的問題的方法如下：

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-15 09:13:22 cheeming

古怪而真實 - 它確實只適用於setTimeout！去圖... – artur 2010-11-02 20:24:57

document.getElementsByName("iframe_name")[0].contentWindow.document.body.focus();

來源

2008-12-15 17:04:34

似乎並不適合我 – Jimmy 2008-12-18 00:58:13

這個解決方案稍微有些變化在我的項目中起作用。我的版本是： `this.iframe [0] .contentWindow.document.body.focus（）;` 但我必須修改它，以便在我使用的插件中工作。 – 2013-02-20 23:17:47

「的setFocus」試聽父文檔中的事件和傳遞事件iframe文檔中的處理程序。

來源

2008-12-15 17:42:35 Liam

這是一種適合我的工作，但它聞起來有點不對勁：

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-18 00:58:48 Jimmy

使用contentWindow.focus（）方法，超時可能需要等待iframe完全加載。

對於我來說，也使用屬性onload="this.contentWindow.focus()"作品，與Firefox，到iframe標籤

來源

2010-07-16 11:07:05 danza

我發現，FF觸發器iframe.contentWindow而不是iframe.contentWindow.document的焦點事件。 Chrome例如可以處理這兩種情況。所以，我只需要將我的事件處理程序綁定到iframe.contentWindow以使事情正常工作。也許這有助於某人...

來源

2012-09-26 12:52:53 mile

我有一個類似的問題，我試圖把重點放在從另一個頁面加載的iframe的txt區域。在大多數情況下它工作。有一個問題，當它載入iFrame但在它可見之前它會在FF中觸發。所以焦點似乎沒有被正確設置。

我工作圍繞這與simular解決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-19 20:53:13

下面是代碼來創建使用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中加載改編自Biranchi的答案How to check if iframe is loaded or it has a content?

來源

2015-04-13 18:49:42

將焦點設置爲iframe內容

回答

相關問題