javascript - 如何同步单独 iframe 中的两个文本区域？

Question

我有两个 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 的内容:

<fieldset class="fields1">

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

</fieldset>

到目前为止，我的 jquery 脚本仅在文本区域放置在主文档中时才有效。

Answer 1

您的设置方式不起作用，因为“.editor”属于另一个 DOM。但是，您可以使用 "contentWindow" property of the IFRAME element 访问该 DOM .

您还可以将 myIframe.contentWindow.document 传递为 context到jquery，以便jquery在那里搜索。

http://jsfiddle.net/cbv0xfq2/

$('.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());
    });
  });
})