0

我正在使用 iframe 在表单旁边显示网站。我想根据各种输入字段的值实时更新该 iframe 中的某些内容。

这就是我想要做的（在 iframe 之外工作）：http: //jsfiddle.net/YkKUS/

textarea 将在 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 确实使用我的 textarea 的内容成功更新，但仅在我刷新页面时。它不会实时更新它，这是我这样做的唯一原因！

谢谢！

4

3 回答 3

1

我在父页面中做了这个，它似乎工作：

$(document).ready(function(){
    $('#textarea').bind('keyup', function() {
        var iframedoc = $('#iframe').get(0).contentDocument;
        $(iframedoc).find('h1').html($(this).val());
    });
});
于 2011-10-30T21:28:00.990 回答
0

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()); 
    });    
});
于 2011-10-30T20:18:30.270 回答
-1

你不能在 iframe 外面做东西，那将是一个巨大的安全漏洞

于 2011-10-30T21:06:42.583 回答