在IE中将焦点设置到iFrame

Question

我的应用程序中有一个树形菜单，点击菜单项时，它会在iFrame中加载一个URL。我想在加载到iFrame中的页面的元素上设置焦点。

我使用了这段代码，在所有浏览器中都可以完美地工作，但IE除外：

var myIFrame = $("#iframeName");
myIFrame.focus();
myIFrame.contents().find('#inputName').focus();

我尝试了不同的选项，比如使用setTimeout，但都没有成功。

页面加载后，当我按Tab键时，光标跳到了第二个输入框，这意味着它一直停留在第一个输入框，但却没有显示光标！

我正在使用ExtJS和ManagedIFrame插件。

任何帮助都将不胜感激。

- Amin Emami

---

iFrame的URL是否来自于与主窗口不同的域？这会涉及到安全域的问题，而且IE的行为也会有所不同。此外，这段代码是包装在文档准备好后运行的，还是直接在页面中运行的？ - Nick Craver

它从相同的域加载页面。是的，代码被包裹在文档准备中。它实际上可以在FireFox、Safari和Chrome上运行，但不能在IE上运行。 - Amin Emami

Answer 1

你需要调用iframe的window对象的focus()方法，而不是iframe元素。我对jQuery和ExtJS都不是很熟悉，所以下面的示例没有使用它们。

function focusIframe(iframeEl) {
    if (iframeEl.contentWindow) {
        iframeEl.contentWindow.focus();
    } else if (iframeEl.contentDocument && iframeEl.contentDocument.documentElement) {
        // For old versions of Safari
        iframeEl.contentDocument.documentElement.focus();
    }
}

- Tim Down

Answer 2

在加载时，iFrame是否可见，还是稍后才显示？元素的创建顺序是setTimeout方法的基础。您是否尝试使用高值等待时间来设置超时？

尝试使用至少半秒钟进行测试...IE倾向于以不同的顺序执行操作，因此可能需要较长的超时时间，以便在呈现/绘制完成之前不会触发：

$(function(){
  setTimeout(function() {
    var myIFrame = $("#iframeName");
    myIFrame.focus();
    myIFrame.contents().find('#inputName').focus();
    }, 500);
});

- Nick Craver

---

好的，我之前甚至试过1000。还有一件可能有帮助的事情是，它会短暂地显示光标，然后光标立即消失！正如我在问题中所说的那样，在我按下Tab键之后，它会跳到下一个输入框。它只是不显示光标。此外，iframe在加载时可见，但稍后设置src，每次用户单击菜单项时都会这样做。 - Amin Emami

你是否每次关注 iframe 的 src 改变？ - Nick Craver

是的，我是。它每次在文档加载事件之后设置焦点。 - Amin Emami

Answer 3

没有一个可用的示例很难进行故障排除，但您可以尝试隐藏和显示输入框，以强制IE重新绘制元素。

类似这样：

var myIFrame = $("#iframeName");
myIFrame.focus();
myIFrame.contents().find('#inputName').hide();
var x = 1;
myIFrame.contents().find('#inputName').show().focus();

这可能会使IE显示光标。

- honeybuzzer

Answer 4

我可以通过以下方式使IE聚焦iframe中的输入框：

iframe.focus();
var input = iframe...
input.focus();
iframe.contentWindow.document.body.focus();
input.focus();

- Arne