55

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

有什么方法可以在外部页面中使用 JavaScript 将焦点设置到内部页面，这样我就不必在 iframe 内单击？

编辑：回复评论：

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

我实际上并不是在寻找传统意义上的“setFocus”，而是“在 iframe contentDocument 上启用事件处理程序”

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 完全加载所必需的。

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

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

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

于 2008-12-15T17:42:35.800 回答
3

我有一个类似的问题，我试图专注于从另一个页面加载的 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();
于 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 何时加载的代码改编自Biranchi对如何检查 iframe 是否已加载或是否有内容的回答？

于 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 回答