Question

我正在使用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的内容成功更新，但仅在我刷新页面时。它并没有实时更新它在飞行中，这是我这样做的唯一原因！

谢谢！

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外面做iframe，这将是一个巨大的安全漏洞

使用jQuery更新iFrame中的内容live＆amp;在即时...？

3 个答案: