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.

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

Comments

Popular posts from this blog

c++ - No viable overloaded operator for references a map -

java - Custom OutputStreamAppender not run: LOGBACK: No context given for <MYAPPENDER> -

java - Cannot secure connection using TLS -