将文本插入由 Iframe 外部按钮触发的设计模式 Iframe

Question

我有一个可编辑的 iframe，当用户单击 iframe 外部的按钮时，我想在光标位置插入文本。我正在尝试使用以下代码插入文本：

function insertAtCursor(iframename, text, replaceContents) {
      if(replaceContents==null){replaceContents=false;}
      if(!replaceContents){//collapse selection:
         var sel=document.getElementById(iframename).contentWindow.getSelection()
         sel.collapseToStart()
      }
      document.getElementById(iframename).contentWindow.document.execCommand('insertHTML', false,     text);
};

我认为这是失败的，因为当我单击按钮时焦点会发生变化。但是，我不知道如何纠正这个问题。感谢您的帮助。

Answer 1

您关于焦点转移影响代码插入的说法是正确的。

使用 jQuery 库，您可以将焦点转移回按钮单击绑定中的 iframe：

$('#button').click(function(event) {
    event.preventDefault();
    $('#iframe').focus();
    insertAtCursor('iframe', 'test-text', null);
});

在纯 JavaScript 中，在执行 insertAtCursor() 之前转移焦点，如下所示：

document.getElementById('iframe').focus()