Using Jquery To Update Content Within An Iframe Live & On-the-fly...?

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

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

Solution 2:

There might be some kinks with jQuery, or you might be doing it incorrectly. Either way, it could be easiest to actually run half of your code within the iframe; then you can call iframe.contentWindow.getHtml(), or iframe.contentWindow.setHtml(), if you can. Also IIRC, the contentDocument was not standard either; some browsers require contentWindow.document or similar.

However, the main culprit would be this:

$('.liveDemoFrame').load( function(){
    $(this.contentDocument).find('h1').html($('textarea').val());
    $('textarea').keyup(function() {
         // here this refers to textarea dom element, not iframe
         $(this.contentDocument).find('h1').html($(this).val()); 
    });    
});

Fix could be like

$('.liveDemoFrame').load( function(){
    var iframeDocument = $(this.contentDocument);
    iframeDocument.find('h1').html($('textarea').val());
    $('textarea').keyup(function() {
         // here this refers to textarea dom element, not iframe
         iframeDocument.find('h1').html($(this).val()); 
    });    
});

Solution 3:

You can't do stuff in the iframe from outside of it, that would be a massive security hole