使用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。文件或类似文件

然而，罪魁祸首应该是这个:

$('.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外部做一些事情，这将是一个巨大的安全漏洞