Javascript 如何在单独的iFrame中同步两个文本区域？

我有两个iFrame，它们都包含一个带有文本区域的表单

我的目标是同步两个文本区域，以便用户在其中一个区域中键入的内容在另一个区域中复制。如何跨两个（或更多）独立的iFrame执行此操作

主要文件：

<script>
$("iframe").ready(function(){
    $(".editor").keyup(function(){
        $(".editor").val($(this).val());
    });
});
</script>

<iframe src="/editor.php?mode=post&f=1" class="iframe-editor"></iframe>
<iframe src="/editor.php?mode=post&f=2" class="iframe-editor"></iframe>

$（“iframe”）.ready（函数（）{
$（“.editor”）.keyup（函数（）{
$（“.editor”）.val（$（this.val（））；
});
});

iFrame的内容：

<fieldset class="fields1">

    <textarea name="message" id="message" class="editor">{MESSAGE}</textarea>

</fieldset>

{MESSAGE}

---

到目前为止，我的jquery脚本只在文本区域放在主文档中时才起作用。

设置它的方式不起作用，因为“.editor”属于另一个DOM。但是，您可以通过使用访问该DOM

您还可以将

myIframe.contentWindow.document

传递给jquery，以便jquery在那里搜索

---

我很确定，出于安全原因，不能让javascript影响内部（或外部）iframe。如果iframe属于不同的域，我认为这是正确的。在我的例子中，主文档和iFrame都在同一个域中。如果我错了（我希望^^^）就不确定是否可以这样做，因为我很感兴趣，也许我遗漏了一些明显的东西，但它似乎不适合我。它的第一行应该有

.iframe editor

，第六行应该有

.containerFrame

？

$('.iframe-editor').each(function() {
  var frame = this;

  $(frame.contentWindow.document.body).on('input', '.editor', function() {
    var textarea = $(this);
    $(".iframe-editor").not(frame).each(function() {
      $('.editor', this.contentWindow.document).val(textarea.val());
    });
  });
})