Использование jQuery для обновления контента в iFrame в реальном времени и на лету

Question

Я использую iframe для отображения веб-сайта рядом с формой. Я хочу обновить определенный контент внутри этого iframe, основываясь на значении различных полей ввода.

Это то, что я пытаюсь сделать (работая вне iframe): http://jsfiddle.net/YkKUS/

Текстовая область будет за пределами iframe, а содержимое, которое будет обновляться, будет внутри 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 действительно успешно обновляется с содержимым моей текстовой области, но только когда я обновляю страницу. Он не обновляет его в прямом эфире и на лету, и это единственная причина, по которой я это делаю!

Спасибо!

Answer 1

Я сделал это на родительской странице, и похоже, что это работает:

Answer 2

Вы не можете делать вещи в iframe извне, это было бы огромной дырой в безопасности

Answer 3

В jQuery могут быть некоторые перегибы, или вы делаете это неправильно. В любом случае, проще всего запустить половину вашего кода в iframe; тогда вы можете вызвать iframe.contentWindow.getHtml () или iframe.contentWindow.setHtml (), если можете. Также IIRC, contentDocument также не был стандартным; некоторым браузерам требуется contentWindow.document или аналогичный.

Тем не менее, главный виновник был бы следующим:

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

Исправление может быть как

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