Cannot programmatically populate an iframe with Javascript

Question

I want to dynamically populate an iframe with Javascript.

I do not want the iframe in a html document loaded in via src.

I do not want to use Jquery, just plain old javascript (ECMA 5.1).

Here is my code so far:

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);

Here is my populateIframe function:

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;
}

I was trying to call appendChild() directly to the iframe which didn't work, so I did some research and found examples of appending to the contentDocument.documentElement. It still doesn't work.

Many thanks for any help!

Is there a particular reason why you are using an iFrame rather than a div? — Robin Wright
– Robin Wright, Commented Jan 5, 2018 at 16:36
I think iframes can only be populated from the src, if you are just appending elements, then I would use a div as robin says — Pete
– Pete, Commented Jan 5, 2018 at 16:39
Yeah, the iframe must be hosted as it will process credit card data — dahui
– dahui, Commented Jan 5, 2018 at 16:39
Unless it is hosted on your server, I don't think you'll be able to tamper with it, otherwise anyone would be able to inject stuff into iframes to rob people's details — Pete
– Pete, Commented Jan 5, 2018 at 16:40
We're not worried about people tampering with the iframe, as it is hosted by us. Hence the use of an iframe. Users of the SDK will not be PCI compliant. — dahui
– dahui, Commented Jan 5, 2018 at 16:43

Nikola Mitic · Accepted Answer · 2018-01-05 17:22:17Z

1

You missed to append iframe content to the body.

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;
}

See here --> https://jsfiddle.net/nmitic/24ejkfnw/

answered Jan 5, 2018 at 17:22

Nikola Mitic

1,5123 gold badges13 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

dahui Over a year ago

4 hours well spent. Thank you sir!

Nikola Mitic Over a year ago

Yeah, I hate when that happens :D

dahui Over a year ago

I've been through at least 4-5 resources and examples of this issue and none of them included the body, so I never thought of it. In my original example I actually did add a body first and add divs to it, it musn't have been working for another reason. I'll just have to use TDD properly I guess and add a few lines at a time. Thanks again.

Nikola Mitic Over a year ago

I didn't get why you code is not working, but then I inspect the dom and saw that p tag gets rendered under the body, so that's when the light turn on for me.

dahui Over a year ago

Annoyingly, I can't inspect the Iframe DOM, as when I try "Inspect Frame Source" it comes up as blank, I assume because it doesn't have a 'src' set. Even now with the text showing, it is blank. Very annoying for testing!

Collectives™ on Stack Overflow

Cannot programmatically populate an iframe with Javascript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related