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

Inserting Text into a Designmode Iframe Triggered By a Button Outside the Iframe

本文关键字:Iframe 设计模式 插入文本 按钮 外部      更新时间:2023-09-26

我有一个可编辑的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);
};

我认为这是失败的,因为当我去点击按钮时焦点发生了变化。然而,我不知道如何纠正这一点。谢谢你的帮助。

你是正确的焦点转移影响你的代码插入。

使用jQuery库,您可以将焦点移回按钮的点击绑定中的iframe:

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

在纯javascript中,在执行insertAtCursor()之前,像这样转移焦点:

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