Question

我想在页面中添加iframe元素，然后在iframe中添加<p>元素我试过这个：

var iframe = document.createElement('iframe');
iframe.frameBorder = 1;
iframe.width = "500px";
iframe.height = "250px";
iframe.id = "iframe";

var p = document.createElement('p');
iframe.appendChild(p);
document.getElementById("div").appendChild(iframe); //this is a div  that I have in body.

iframe已添加到页面中，但P未添加到iframe（iframe的正文）

Answer 1

在现代浏览器中，您使用contentDocument属性。在其他情况下，您必须使用contentWindow.document。您可以在onload事件中使用iframe的文档创建段落。所以：

var iframe = document.createElement('iframe');
iframe.frameBorder = 1;
iframe.width = "500px";
iframe.height = "250px";
iframe.id = "iframe";

iframe.onload = function()
{
    var doc = iframe.contentDocument || iframe.contentWindow.document;
    var p = doc.createElement('p');
    p.textContent = "Paragraph in iframe";
    doc.body.appendChild(p);
};

document.getElementById("div").appendChild(iframe); //this is a div  that I have in body.

我做了jsfiddle demo。

另外，我建议您不要使用与标记名称相同的ID。它可能会变得混乱。

Answer 2

希望这会让你朝着正确的方向前进：

var p = document.createElement('p');

var iFrmDocument = (iframe.contentWindow || iframe.contentDocument);
if (iFrmDocument.document) iFrmDocument=iFrmDocument.document;
iFrmDocument.appendChild(p);

document.getElementById("div").appendChild(iframe);

这有意义吗？在处理[i] Frames

时，这是一个必要的绕道

动态添加iframe和段落元素

2 个答案: