javascript - How to synchronize two text areas within separate iframes? -
i have 2 iframes, both of contain form text area.
my goal synchronize 2 text areas, user types in 1 reproduced in other. how can across 2 (or more) separate iframes?
main document:
<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>
content of iframes:
<fieldset class="fields1"> <textarea name="message" id="message" class="editor">{message}</textarea> </fieldset>
as of now, jquery script works if text areas placed in main document.
the way have set doesn't work because ".editor" belongs dom. however, can access dom using "contentwindow" property of iframe element.
you can pass myiframe.contentwindow.document
context jquery, jquery searches there.
$('.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()); }); }); })
Comments
Post a Comment