Question

我想知道是否可以替换iframe中的某些单词。

我已使用jQuery更改iframe内容相同的内容，但有替换内容。这里的问题是＆＃39;光标重置＆＃39;到输入字段的开头，所以你必须从头开始写。

所以这就是我所做的

<html>
<head>
<script>
function iFrameOn(){
    richTextField.document.designMode = 'On';
}

</script>
</head>
<body onLoad="iFrameOn();">

<!-- Hide(but keep)your normal textarea and place in the iFrame replacement for it -->
<textarea style="display:none;" name="myTextArea" id="myTextArea" cols="100" rows="14"></textarea>
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:100px; height:20px;">
</iframe>
<!--End replacing your normal textarea -->
</p>
<script>
      function ReplaceWords(){
          var textfield = document.getElementById("richTextField");

          textfield.contentWindow.document.body.onkeyup = function(e){
              var content   = textfield.contentWindow.document.body.innerHTML;
              var Fixed_Content = content.replace("hey", "yo");
              $(document).ready(function() {
                  $('#richTextField').contents().find('body').html(Fixed_Content);
              });
          };
        };
      ReplaceWords();
</script>

</body>
</html>

问题是：如果你可以在没有光标重置的情况下替换iframe中的一些内容，因为当你输入它时它不受欢迎，它只是从重新开始。

更新：基本上它不是焦点的textarea，它隐藏在iframe中，因此我使用document.designMode = 'On';。

我已经再次更新了帖子，这应该是从一开始就应该如何。

链接到jsfiddle： https://jsfiddle.net/tqf3v2sk/8/

Answer 1

在同一个域中使用 iFrame 与使用DOM元素没有太大区别。您只需确保在正确的窗口和文档对象上调用您使用的方法。但是，一旦正确定位了窗口和文档，就可以从父窗口调用它们，就像它与脚本在同一窗口中一样。

关于打字时的更换，有几种方法可以解决。一种方法是使用 document.execCommand（＆＃39; insertText＆＃39;）和选择。您检测输入的密钥是否与要替换的单词的最后一个字符匹配，如果是，则选择要替换的单词的长度并检查它是否匹配。如果匹配，则调用execCommand并将其替换，将光标留在替换的末尾。

function replaceOnKeyDown(e, toReplace, replaceWith) {

  var iptFld = e.target;
  var lastLetter = toReplace[toReplace.length - 1];
  var keyEntered = String.fromCharCode(e.keyCode);
    console.log(keyEntered)
  // To make it more efficient, you can call the rest only if the
  // key just pressed is the same as the last of the word you
  // need to replace.
  if (lastLetter.toLowerCase() === keyEntered.toLowerCase()) {
    // Set selection to your word length
    var range = frameWindow.getSelection().getRangeAt(0);
    var caretPosition = range.startOffset;
    // Since you're on key down, the caret position is before the
    // last letter is entered.
    var toReplaceStart = caretPosition - toReplace.length + 1;

    range.setEnd(range.startContainer, caretPosition);
    range.setStart(range.startContainer, toReplaceStart);
    frameWindow.getSelection().addRange(range);
    // Check if the selection matches the word to replace
    // Since you're on mouse down, the range will only include 
    // up until the letter being entered. So you need to validate
    // that the word without the last letter equals
    // the selection.
    if (range.toString() + lastLetter === toReplace) {

      frameDocument.execCommand('insertText', false, replaceWith);
      // prevent last letter to be entered
      e.preventDefault();

    } else {

      frameWindow.getSelection().collapse(range.startContainer, caretPosition);

    }
  }
}

var textfield = document.getElementById("richTextField");
var frameWindow = textfield.contentWindow
var frameDocument = frameWindow.document
frameDocument.designMode = 'on'
frameDocument.body.onkeydown = function(e) {
  replaceOnKeyDown(e, 'hey', 'yo')
};

https://jsfiddle.net/k0qpmmw1/6/

在iframe

1 个答案: