iFrame内のコンテンツをjQueryを使用してライブ＆オンザフライで更新する...？

Question

私はフォームの横にウェブサイトを表示するためにiframeを使用しています。さまざまな入力フィールドの値に基づいて、そのiframe内の特定のコンテンツを更新したいと考えています。

これは私が（IFRAMEの作業外）をやろうとしているものです：http://jsfiddle.net/YkKUS/

テキストエリアは、iframeの外になり、更新されます内容は、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?!? 
       });  
      }); 

第5行は私にいくつかの問題を引き起こしている。ここで

は私のコードは私のiframeで動作するようになっています。 iframeは実際には私のテキストエリアの内容で正常に更新されますが、ページを更新するときだけです。それは私がこれをやっている唯一の理由は、ライブで更新されていない&オンザフライ！

ありがとうございます！

Answer 1

私は親ページでこれを行なったし、動作するように見えた：

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

Answer 2

jQueryに何らかの不具合があるか、間違っている可能性があります。いずれにしても、コードの半分を実際に実行するのが最も簡単です。 iframe; iframe.contentWindow.getHtml（）またはiframe.contentWindow.setHtml（）を呼び出すことができます。また、IIRCでは、contentDocumentも標準ではありませんでした。一部のブラウザではcontentWindow.documentなどが必要です。

しかし、主犯はこのようになります：

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

Answer 3

あなたはそれの外部からiframe内にものを行うことができないよう

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

修正は可能性があり、大規模になることセキュリティホール