iFrame에서 jQuery를 사용하여 콘텐츠를 실시간으로 실시간 업데이트 ...?

Question

iframe을 사용하여 양식 옆에 웹 사이트를 표시하고 있습니다. 다양한 iframe 값을 기반으로 해당 iframe 내의 특정 콘텐츠를 업데이트하고 싶습니다.

이 내가 (iframe을의 작업 외부) 할 노력하고있어 무엇 : http://jsfiddle.net/YkKUS/

텍스트 영역은 iframe이와 iframe이 내부에있을 것입니다 업데이트됩니다 내용의 외부됩니다. 여기

는 내 코드 내 iframe이 작동하도록되어있다 : 제 5 라인은 나에게 몇 가지 문제를 일으키는

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

. iframe은 실제로 내 textarea의 내용으로 성공적으로 업데이트되지만 페이지를 새로 고칠 때만 성공적으로 업데이트됩니다. 그것은 업데이 트가 아니에요 라이브 & 그 날이 일을하고있는 유일한 이유입니다!

감사합니다.

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

수정이 될 수있다, 대규모가 될 것이라고 보안 구멍