Question

I’m using an iframe to display a website next to a form. I want to update certain content within that iframe live based upon the value of the various input fields.

This is what I’m trying to do (working outside of an iframe): http://jsfiddle.net/YkKUS/

The textarea will be outside of the iframe and the content that’ll be updated will be inside the iframe.

Here is my code adapted to work with my iframe:

            $('.liveDemoFrame').load( function(){   // load the iframe          
                $(this.contentDocument).find('h1').html($('textarea').val());                   
                $('textarea').keyup(function() {
                    $(this.contentDocument).find('h1').html($(this).val()); // this line is screwing something up?!?
                });    
            });

The 5th line is causing me some problems. The iframe DOES actually update successfully with the content of my textarea but only when I refresh the page. It’s not updating it live & on-the-fly which is the only reason I’m doing this!

Thanks!

Answer 1

I did this in the parent page and it seemed to work:

$(document).ready(function(){
    $('#textarea').bind('keyup', function() {
        var iframedoc = $('#iframe').get(0).contentDocument;
        $(iframedoc).find('h1').html($(this).val());
    });
});