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

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

java - UML - How would you draw a try catch in a sequence diagram? -

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