将内容插入 iFrame答案

【问题标题】：Insert content into iFrame将内容插入 iFrame
【发布时间】：2014-03-14 18:46:29
【问题描述】：

我正在尝试将一些内容插入“空白”iFrame，但没有插入任何内容。

HTML：

<iframe id="iframe"></iframe>

JS：

$("#iframe").ready(function() {
    var $doc = $("#iframe").contentWindow.document;
    var $body = $("<body>").text("Test");
    $body.insertAfter($doc);
});

我正在调用ready 函数，所以我不明白为什么它没有插入。

【问题讨论】：

您的 JavaScript 第 2 行的 ID 错误，首先
@Indy 仍然无法正常工作
iframe 的 id 不应以 # 开头。 <iframe id="iframe"></iframe>
您的 HTML 也不正确，我假设您的意思是 id="iframe"
@freefaller 虽然还是不行^^

标签： javascript jquery html iframe

【解决方案1】：

等等，你真的需要用 javascript 来渲染它吗？

请注意，在 HTML5 中有 srcdoc，它可以为你做到这一点！（缺点是 IE/EDGE 还不支持它https://caniuse.com/#feat=iframe-srcdoc）

请看这里 [srcdoc]：https://www.w3schools.com/tags/att_iframe_srcdoc.asp

另外需要注意的是，如果你想避免内外js代码的干扰你应该考虑使用sandbox模式。

请看这里 [sandbox]：https://www.w3schools.com/tags/att_iframe_sandbox.asp

【讨论】：

【解决方案2】：

如果你想在你的IFrame 中找到你网页上的所有CSS，试试这个：

var headClone, iFrameHead;

// Create a clone of the web-page head
headClone = $('head').clone();

// Find the head of the the iFrame we are looking for
iFrameHead = $('#iframe').contents().find('head');

// Replace 'iFrameHead with your Web page 'head'
iFrameHead.replaceWith(headClone);

// You should now have all the Web page CSS in the Iframe

祝你好运。

【讨论】：

【解决方案3】：

您可以将 div 中的文本（例如）输入到 iFrame 中：

var $iframe = $('#iframe');
$iframe.ready(function() {
    $iframe.contents().find("body").append($('#mytext'));
});

和 div：

<iframe id="iframe"></iframe>
<div id="mytext">Hello!</div>

和 JSFiddle 演示：link

【讨论】：

最好有英文文本（即使在这种情况下理解它不是很重要）。此外，作为一般提示，欢迎使用几句话来解释您的解决方案的工作原理。它将使人们免于分析代码以了解您的解决方案是否是他们正在寻找的。谢谢！

【解决方案4】：

你真的不需要 jQuery：

var doc = document.getElementById('iframe').contentWindow.document;
doc.open();
doc.write('Test');
doc.close();

jsFiddle Demo

如果你一定要使用 jQuery，你应该使用contents():

var $iframe = $('#iframe');
$iframe.ready(function() {
    $iframe.contents().find("body").append('Test');
});

jsFiddle Demo

请不要忘记，如果你使用 jQuery，你需要像下面这样钩入 DOMReady 函数：

$(function() {  
    var $iframe = $('#iframe');
    $iframe.ready(function() {
        $iframe.contents().find("body").append('Test');
    });
});

【讨论】：

我同意 jQuery 对于一些简单的 DOM 操作来说有点矫枉过正，但无论如何我已经为页面的其他部分得到了它，但感谢您的详细回复
没问题，很高兴为您提供帮助。请记住，尽管使用 jQuery 并不总是最好的选择。在这个例子中，它当然会更慢。
有人遇到过 IE 引发的跨域安全验证吗？我看到了这个例子。关于如何解决的任何想法？
已更改为 var ifr = d.getElementById('iframe'), doc = ifr.contentDocument || ifr.contentWindow.document;。来自thinkofdev.com/…
这不是一个糟糕的解决方案，因为许多浏览器会在您使用 doc.write(); 时给您一个警告；这是非常不鼓励的。

【解决方案5】：

这应该做你想做的：

$("#iframe").ready(function() {
    var body = $("#iframe").contents().find("body");
    body.append('Test');
});

查看此JSFiddle 以获得工作演示。

编辑：你当然可以做一种线条样式：

$("#iframe").contents().find("body").append('Test');

【讨论】：

仅仅因为他用$命名变量并不意味着它是PHP和JS的奇怪组合。例如，我实际上有时将保存 jQuery 对象的变量命名为 $testDiv。它可以帮助我跟踪代码中的 jQuery 对象...变量名前面的 $ 与 JS 语法无关...
好的，抱歉，已删除攻击性语气。
@PavelŠtěrba 未采取 :)
如果你使用 jquery 函数find 这是否意味着 iframe 中已经有一个 body 标签 - 或者我错过了什么？
@user2521439 是的。 iframe 是使用内部空白文档创建的。浏览器会自动将<html><head></head><body></body></html> 添加到 iframe 的 contentDocument 中。