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

你设置它的方式并不起作用，因为＆＃34; .editor＆＃34;属于另一个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());
    });
  });
})

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

1 个答案: