带有 jQuery 的 iframe答案

【问题标题】：iframes with jQuery带有 jQuery 的 iframe
【发布时间】：2010-02-09 14:29:31
【问题描述】：

我有一个纯 JS 脚本，它接受代码并将其插入 iframe：

var html = "<p>Some <strong>HTML</strong> to insert</p>"
var iframe = document.getElementById('contentsframe');
iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document : iframe.contentDocument;
iframe.document.open();
iframe.document.write(html);
iframe.document.close();

我想创建一个 jQuery 插件，因为我经常使用这段代码，我尝试了几种方法来使用 jQuery 获取 iframe：

var iframe = $('#contentsframe');
var iframe = $('#contentsframe').contents();

这两种方法似乎都返回了调用 document.open、write 或 close 所需的错误类型的对象。有没有人知道这个问题的解决方案？

干杯

伊夫

【问题讨论】：

标签： jquery iframe selector

【解决方案1】：

我一直在使用您在帖子中提到的相同代码，没有问题。试试这样的：

var html = "<p>Some <strong>HTML</strong> to insert</p>"
var iframe = $('#contentsframe').contents().find("body").append(html);

这应该将您的代码附加到 iframe 的正文标记的开头。

edit：在这种情况下，var iframe 将被设置为 iframe 的主体元素，这可能会造成混淆。 $('#contentsframe').contents() 实际上会引用整个 iframe 对象。

【讨论】：

干杯，我有一个问题，如果我想替换 iframe 的全部内容，该怎么办？有什么想法吗？
使用 html() 函数而不是 append() 应该可以做到这一点。
我尝试使用 iframe.contents().html(code) 来尝试替换 iframe 的全部内容，但它似乎不起作用。我想替换 iframe 的整个 html 而不仅仅是正文。我什至不知道这是否可能。
我不知道为什么 $('#contentsframe').contents().html(code) 会失败。作为替代方案，请尝试 $('#contentsframe').contents().find('html').html(code)

【解决方案2】：

我最近写了一个应用程序，我不得不做这种事情。我在互联网上发现了频繁的帖子，但没有一个对我有用。这是我最终使用的确实有效的方法。

我在主索引/框架集代码中声明的变量。

    <script> 
        // Global Variables     
        var index = -1;
    var panes = 0;
        var panesHeight=0;
        var pageMode=1;
        var zoomLevel=-2;
    </script>
</head>
<frameset cols="150,*" border="1" bordercolor="#ffffff">
    <frame name="leftNav" src="sidebar.html">
    <frameset rows="*,80" border="1"  bordercolor="#ffffff" >
        <frame name="main" src="main.html" noresize scrolling=auto marginheight=5  marginwidth=5><frame name="pagenav" src="nav.html" noresize scrolling=no marginheight=5  marginwidth=5>
    </frameset>
</frameset>

然后使用这样的东西我需要存储变量和访问框架。这工作得很好，并且与 jQuery 一起工作得很好。我对回复很感兴趣，因为我想尽可能清理这段代码。

    if (window.parent.pageMode == 1) {
        $('#left', window.parent.frames['main'].document).html('<img border="0" src="' + window.parent.pages[window.parent.index + 1].image + '" width="' +  zoom + '" onclick="if(window.parent.pageMode==1){nextPage();showPages();}" style="cursor:e-resize;" >');
    }else{ // mode 0
        $('#left', window.parent.frames['main'].document).html('<img border="0" src="' + window.parent.pages[window.parent.index + 1].image + '" width="' +  zoom + '" align="right"  onclick="if(window.parent.pageMode==0){prevPage();showPages();}" style="cursor:w-resize;" >');
        $('#right', window.parent.frames['main'].document).html('<img border="0" src="' + window.parent.pages[window.parent.index + 2].image + '" width="' + zoom + '" align="left"  onclick="if(window.parent.pageMode==0){nextPage();showPages();}" style="cursor:e-resize;" >');
    }

【讨论】：