当前位置：文江博客话题详情

将焦点设置为 iframe 内容

发布于 2024-07-11 02:29:28 字数 405 浏览 3 评论 0原文

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

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

编辑：对评论的回应：

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

天生の放荡 2024-07-18 02:29:28

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

I had a similar problem with the jQuery Thickbox (a lightbox-style dialog widget). The way I fixed my problem is as follows:

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

The code doesn't seem to work without the setTimeout(). Based on my testing, it works in Firefox3.5, Safari4, Chrome4, IE7 and IE6.

回复收藏 0 原文

酒中人 2024-07-18 02:29:28

使用 contentWindow.focus() 方法，等待 iframe 完全加载可能需要超时。

对我来说，还使用属性 onload="this.contentWindow.focus()" 与 firefox 一起工作到 iframe 标记中

回复收藏 0 原文

找回味觉 2024-07-18 02:29:28

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

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

回复收藏 0 原文

风情万种。 2024-07-18 02:29:28

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

回复收藏 0 原文

猫腻 2024-07-18 02:29:28

我遇到了类似的问题，我试图专注于从另一个页面加载的 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();

i had a similar problem where i was trying to focus on a txt area in an iframe loaded from another page. in most cases it work. There was an issue where it would fire in FF when the iFrame was loaded but before it was visible. so the focus never seemed to be set correctly.

i worked around this with a simular solution to cheeming's answer above

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

回复收藏 0 原文

倾其所爱 2024-07-18 02:29:28

下面是使用 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 是否已加载或是否有内容？

Here is code to create an iframe using jQuery, append it to the document, poll it until it is loaded, then focus it. This is better than setting an arbitrary timeout which may or may not work depending on how long the iframe takes to load.

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

The code for detecting when the iframe is loaded was adapted from Biranchi's answer to How to check if iframe is loaded or it has a content?

回复收藏 0 原文

别理我 2024-07-18 02:29:28

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

回复收藏 0 原文

素手挽清风 2024-07-18 02:29:28

这对我有用，尽管闻起来有点不对劲：

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

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

This is something that worked for me, although it smells a bit wrong:

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

hmmm. it also scrolls to the bottom of the content. Guess I should be inserting the dummy textbox at the top.

回复收藏 0 原文

~没有更多了~