Question

我想用Javascript动态填充iframe。

我不希望通过src加载html文档中的iframe。

我不想使用Jquery，只是简单的旧javascript（ECMA 5.1）。

到目前为止，这是我的代码：

var elementToAttachTo = document.getElementById(attachTo);

// Need to create and attach iframe to page before populating.
// attachTo is provided as a parameter to this function, this definitely
// works as I got this working setting the iframe src to a html file..

var ifrm = document.createElement("iframe");
ifrm.setAttribute("id", "blabla");
// I set src to about:blank here, cause I read to do that somewhere...
ifrm.setAttribute("src", "about:blank");

// I attach the iframe BEFORE populating it.
elementToAttachTo.appendChild(ifrm);

ifrm = populateIframe(ifrm);

这是我的populateIframe函数：

function populateIframe(iframe) {
    var ifrmHtml = iframe.contentDocument.documentElement;

    var p = document.createElement("p");
    p.innerHTML = "Hello iframe!";
    ifrmHtml.appendChild(p);

    iframe.contentDocument.documentElement = ifrmHtml;
    return iframe;
}

我试图将appendChild（）直接调用到不起作用的iframe，所以我做了一些研究并找到了附加到contentDocument.documentElement的示例。它仍然无效。

非常感谢您的帮助！

Answer 1

您错过了向身体添加iframe内容。

function populateIframe(iframe) {
    var ifrmHtml = iframe.contentDocument.documentElement.querySelector('body');

    console.log(ifrmHtml)

    var p = document.createElement("p");
    p.innerHTML = "Hello iframe! Ja sam faca";
    ifrmHtml.appendChild(p);

    iframe.contentDocument.documentElement = ifrmHtml;
    return iframe;
}

见这里 - ＆gt; https://jsfiddle.net/nmitic/24ejkfnw/

无法以编程方式使用Javascript填充iframe

1 个答案: