Question

我有一个带有document.onkeydown事件处理程序的页面，我将其加载到另一个页面的iframe中。我必须在iframe内部单击才能让内容页面开始“收听”。

我是否可以通过某种方式在外部页面中使用JavaScript将焦点设置为内部页面，这样我就不必在iframe中单击了？

编辑：对评论的回应：

上下文是主窗口是一个类似灯箱的系统，除了代替图片，它显示iframe，每个iframe是一个带有keydown / mousemove处理程序的交互式页面。直到我在显示灯箱之后点击iframe，这些处理程序才会触发。

我实际上并不像传统意义上的“setFocus”那样“在iframe contentDocument上启用事件处理程序”

Answer 1

我在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。

Answer 2

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

对我来说，使用属性onload="this.contentWindow.focus()"也可以使用firefox进入iframe标记

Answer 3

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

Answer 4

尝试侦听父文档中的事件，并将事件传递给iframe文档中的处理程序。

Answer 5

我有一个类似的问题，我试图关注从另一个页面加载的iframe中的txt区域。在大多数情况下，它工作。有一个问题，当iFrame加载但在它可见之前，它将在FF中触发。所以焦点似乎永远不会被正确设置。

我解决了上面这个问题的解决方案

    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();

Answer 6

我发现FF会触发iframe.contentWindow的焦点事件，但不会触发iframe.contentWindow.document的焦点事件。例如，Chrome可以处理这两种情况。所以，我只需要将我的事件处理程序绑定到iframe.contentWindow以使事情正常工作。也许这有助于某人...

Answer 7

这是使用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?

的回答改编的

Answer 8

这对我有用，虽然闻起来有些不对劲：

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);

嗯。它还滚动到内容的底部。我猜我应该在顶部插入虚拟文本框。

将焦点设置为iframe内容

8 个答案: