Использование 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

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

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

Answer 3

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