Javascript 将内容插入iFrame

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

HTML:

JS:

$（“#iframe”）.ready（函数（）{
var$doc=$（“#iframe”）.contentWindow.document；
变量$body=$（“”）。文本（“测试”）；
$body.insertAfter（$doc）；
});

---

我正在调用

ready

函数，因此我不明白它为什么不插入。

这应该可以满足您的要求：

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

检查这个工作演示

编辑：您当然可以按一行样式进行编辑：

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

---

您真的不需要jQuery来实现这一点：

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

如果必须使用jQuery，则应使用：

请不要忘记，如果您使用的是jQuery，则需要按如下方式连接到DOMReady函数：

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

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

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

及分区办事处：

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

你好

---

和jsiddle演示：

如果您想要在

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

---

祝你好运。

等等，你真的需要用javascript呈现它吗

请注意，在HTML5中有

srcdoc

，它可以为您做到这一点（缺点是IE/EDGE还不支持它）

请参见此处[

srcdoc

]：

另一件需要注意的事情是，如果您希望避免js代码在内部和外部的干扰，您应该考虑使用

沙盒

模式

---

请参见此处[

sandbox

]：

您的JavaScript第2行的ID有误，请参阅start@Indy尽管iframe的id不应该以#开头，但仍然无法工作

您的HTML也不正确，我想您的意思是

id=“iframe”

@freefiller仍然不能工作，尽管^^^仅仅因为他用

$

命名变量并不意味着它是PHP和JS的奇怪组合。例如，我实际上有时会将保存jQuery对象的变量命名为

$testDiv

。它帮助我跟踪代码中的jQuery对象。。。变量名上的前缀

$

与JS语法无关……好吧，抱歉，删除了冒犯性语气。@PavelŠtěrba None take:）如果您使用jquery函数

find

，这是否意味着iframe中已经有一个body标记？或者我缺少了什么内容？@user2521439是的。iFrame是在内部有一个空白文档的情况下创建的。浏览器会自动将

添加到iframe的contentDocument中。我同意jQuery对于一些简单的DOM操作来说有点过分，但我已经在页面的其他部分得到了它，但是感谢您的详细响应无问题，很高兴能帮上忙。请记住，使用jQuery并不总是最好的选择。在这个例子中，速度当然会慢一些。有人面临IE抛出的跨域安全验证吗？我看到的就是这个例子。关于如何解决这个问题有什么想法吗？改为

var ifr=d.getElementById（'iframe'），doc=ifr.contentDocument | | ifr.contentWindow.document。从中得到的信息是，最好有英文文本（即使在这种情况下，理解它不是很重要）。此外，作为一般提示，欢迎用几句话来解释您的解决方案是如何工作的。这将使人们不必分析代码，从而了解您的解决方案是否正是他们所寻找的。非常感谢。
var $iframe = $('#iframe');
$iframe.ready(function() {
    $iframe.contents().find("body").append($('#mytext'));
});

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

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