使用 jQuery 实时更新 iFrame 中的内容...？答案

【问题标题】：Using jQuery to update content within an iFrame live & on-the-fly...?使用 jQuery 实时更新 iFrame 中的内容...？
【发布时间】：2011-10-30 18:05:13
【问题描述】：

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

谢谢！

【问题讨论】：

啊，现在我看到了，要是你能把你的完整代码放在 jsfiddle 里就好了。你的 keyup 函数中的 this 指的是 textarea dom 元素，而不是 iframe！

标签： javascript jquery iframe keyup

【解决方案1】：

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

$(document).ready(function(){
    $('#textarea').bind('keyup', function() {
        var iframedoc = $('#iframe').get(0).contentDocument;
        $(iframedoc).find('h1').html($(this).val());
    });
});

【讨论】：

【解决方案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()); 
    });    
});

【讨论】：

【解决方案3】：

你不能在 iframe 外部做任何事情，那将是一个巨大的安全漏洞

【讨论】：

真的吗？我可以在 iframe 中的特定区域使用 hide() 之类的东西，效果很好，但 keyup 事件根本不起作用。
hmm，iframe 和父页面是同一个域吗？
是的。我在某处读到，将 jquery 包含在 iframe 页面中也可能会导致问题，因此我尝试将其删除，但仍然没有运气。
另外 - textarea 的值成功地改变了 t1Title 类。当您在文本区域中键入时，它只是无法正常工作。
啊，我认为这是一个不同的域......我的意思是......你为什么要使用 iframe 对吗？ ;) 不管怎样，让我拉小提琴吧……