在 IE 中将焦点设置为 iFrame答案

【问题标题】：Setting Focus to an iFrame in IE在 IE 中将焦点设置为 iFrame
【发布时间】：2010-01-11 23:29:42
【问题描述】：

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

我正在使用这段代码，它在除 IE 之外的所有浏览器中都能完美运行：

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

我已经尝试了所有不同的选项，例如使用 setTimeout，但没有机会。

页面加载后，当我点击tab键时，它进入第二个输入，这意味着它一直在第一个输入上，但它没有显示光标！

我正在使用 ExtJS 和 ManagedIFrame 插件。

感谢任何帮助。

【问题讨论】：

iFrame URL 是否来自与主窗口不同的域？对此存在安全域问题，并且 IE 的行为有所不同。另外，这段代码是打包运行在准备好的文档上，还是只在页面中运行？
它从同一个域加载页面。是的，代码已包含在准备好的文档中。它实际上适用于 FireFox、Safari 和 Chrome，而不是 IE。

标签： javascript jquery iframe extjs focus

【解决方案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();
    }
}

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

好吧，我之前什至用 1000 试过。还有一件事可能会有所帮助，它会显示光标片刻，然后光标立即消失！正如我在问题中所说，在我点击选项卡后，它会转到下一个输入框。它只是不显示光标。此外，iframe 在加载时可见，但会在用户每次单击菜单项时设置 src。
每次 iframe src 更改时，您是否都在关注？
是的，我是。每次在 documentloaded 事件之后设置焦点。

【解决方案3】：

如果没有工作示例，很难进行故障排除，但您也可以尝试隐藏和显示输入，以强制 IE 重绘元素。

类似：

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

这可能会让 IE 显示光标。

【讨论】：

【解决方案4】：

我可以让 IE 将输入字段集中在 iframe 中：

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

【讨论】：