Question

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

我正在使用此代码，并且在IE以外的所有浏览器中都能正常运行：

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

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

页面加载后，当我按Tab键时，它会转到第二个输入，这意味着它已经在第一个输入上，但它没有显示光标！

我正在使用ExtJS和ManagedIFrame插件。

感谢任何帮助。

Answer 1

您需要调用iframe的focus()对象的window方法，而不是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();
    }
}

Answer 2

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

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

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

Answer 3

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

类似的东西：

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

这可能会让IE摇动显示光标。

Answer 4

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

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

将焦点设置为IE中的iFrame

4 个答案: