在 Chrome 中将焦点设置在 iframe 上

发布于 2024-12-15 12:07:20 字数 926 浏览 0 评论 0原文

我在 Chrome 中有一个带有 designMode='on' 的 iframe (id: 'chat')。

在 Enter 按键事件中，我调用函数 send()，该函数获取 iframe 内容并将其写入套接字。我的问题是，当清除 iframe 时，我失去了焦点。

如何设置焦点以便我可以继续在 iframe 中输入文本？

function send(){
    var $iframe = $('#chat');
    var text = $iframe.contents().text() + "\n";  

    socket.send(text);

    // When this is done, the focus is lost
    // If commented, the focus will not be lost
    $iframe.contents().find('body').empty();

    // My different failed attempts to regain the focus
    //$iframe.focus();
    //$iframe.contents().focus();
    //$iframe.contents().find('body').focus();
    //$iframe.contents().find('body').parent().focus();
    //$iframe[0].contentWindow.focus();

    // I've also tried all the above with timers
    //setTimeout( function(){ $('#chat').contents().focus(); }, 100);
}

我已经尝试了许多其他问题的解决方案，但似乎没有一个有效。

原文

I have an iframe (id: 'chat') with designMode='on' in Chrome.

On Enter keypress event I call the function send(), which takes the iframe contents and writes it to a socket. My problem is that when clearing the iframe, I lose focus.

How to do I set the focus so I can continue to type text in the iframe?

function send(){
    var $iframe = $('#chat');
    var text = $iframe.contents().text() + "\n";  

    socket.send(text);

    // When this is done, the focus is lost
    // If commented, the focus will not be lost
    $iframe.contents().find('body').empty();

    // My different failed attempts to regain the focus
    //$iframe.focus();
    //$iframe.contents().focus();
    //$iframe.contents().find('body').focus();
    //$iframe.contents().find('body').parent().focus();
    //$iframe[0].contentWindow.focus();

    // I've also tried all the above with timers
    //setTimeout( function(){ $('#chat').contents().focus(); }, 100);
}

I've tried many of the solutions on other questions, but none seems to work.

分享到QQ

分享到微博

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

发布评论

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

濫情▎り 2024-12-22 12:07:20

诀窍是首先将焦点设置在主体上，然后创建一个Range。

var win = iframe.contentWindow;
var range = win.document.createRange();
range.setStart(win.document.body, 0);
range.setEnd(win.document.body, 0);
win.document.body.focus();
win.getSelection().addRange(range);

The trick is to first set focus on the body and then create a Range.

var win = iframe.contentWindow;
var range = win.document.createRange();
range.setStart(win.document.body, 0);
range.setEnd(win.document.body, 0);
win.document.body.focus();
win.getSelection().addRange(range);

回复收藏 0 原文

柒七 2024-12-22 12:07:20

这个问题已在这里得到解答

基本上，如果您不刷新 iframe，您可以使用：

$iframe[0].contentWindow.focus();

请注意，我正在获取底层 iframe DOM 对象。

This question has been answered here

Basically, if you are not refreshing the iframe you could use:

$iframe[0].contentWindow.focus();

Note that I'm grabbing the underlying iframe DOM object.

回复收藏 0 原文

萌吟 2024-12-22 12:07:20

我已经尝试过以下解决方案，它适用于所有浏览器（IE/Chrome/Firefox）

上下文：我想始终关注 iframe。

    function IFocus() {
        var iframe = $("#iframeId")[0];
        iframe.contentWindow.focus();
    };
    window.setInterval(IFocus, 300);

希望对有需要的人有帮助...

I have tried below solution it works in all browser (IE/Chrome/Firefox)

Context: I want to focus the iframe all the time.

    function IFocus() {
        var iframe = $("#iframeId")[0];
        iframe.contentWindow.focus();
    };
    window.setInterval(IFocus, 300);

Hope it helps, if any one in need...

回复收藏 0 原文

ら栖息 2024-12-22 12:07:20

我用 Chrome 测试了这个解决方案。我最初将其发布在将焦点设置为 iframe 内容。

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

I tested this solution with Chrome. I originally posted it in Setting focus to iframe contents.

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 原文

~没有更多了~