将焦点设置为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内容

回答

相关问题