How to add Html Content to a new created Iframe in JS

Question

I am creating an Iframe and trying to add Html to it's body, butI constantly get an error Cannot read property body of null.

My code looks something like this:

var frameToPrint = document.createElement("IFRAME") as HTMLFrameElement;
frameToPrint.contentDocument.body.innerHTML = "";

It works if I add the Iframe to my HTML and then get it using GetElementById, but I cannot have this Iframe displayed on my page. Even hidden, it messes up my dimensions.

Thank you in advance!

Have you tried to add the body as html first? The Iframe is just an empty container without anything in it, so it doesn't know that it's supposed to be html, which means it doesn't have a body on creation. — D.Schaller
– D.Schaller, Commented Oct 19, 2018 at 10:40

adriantoine · Accepted Answer · 2024-09-23 17:03:59Z

1

I found the answer. You need to append the new created frame to your body. That initializes the contentWindow and the contentDocument of the iframe.

var frameToPrint = document.createElement("iframe");
frameToPrint.setAttribute("name", "prnt");
document.body.appendChild(frameToPrint);

edited Sep 23, 2024 at 17:03

adriantoine

2,2081 gold badge16 silver badges14 bronze badges

answered Oct 19, 2018 at 12:29

Costin C.

314 bronze badges

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

1 Comment

D.Schaller Over a year ago

"It works if I add the Iframe to my HTML and then get it using GetElementById, but I cannot have this Iframe displayed on my page."

D.Schaller · Accepted Answer · 2018-10-19 10:54:37Z

0

The iframe is an empty element on creation. It doesn't know that it is supposed to be (for you) an html-document. Therefore it has no body you can append to.

Down there I have snippet as an example.

create the iframe-element: var iframe = document.createElement("iframe");
create the body-element: var body = document.createElement("body");
create the content you want to append: ex.: var body = document.createElement("body");
Fill your content with actual content: content.textContent = "Some Text";

And after that you just append it accordingly to your iframe-element

var iframe = document.createElement("iframe"); 
var body = document.createElement("body");
var content = document.createElement("p");
content.textContent = "Some Text";

body.appendChild(content);
iframe.appendChild(body);

console.log(iframe.innerHTML);

answered Oct 19, 2018 at 10:54

D.Schaller

6514 silver badges19 bronze badges

2 Comments

Costin C. Over a year ago

That won't work. The Iframe has it's own content window and content document that should have standard html structure.

D.Schaller Over a year ago

Yea, but he won't append it to his own HTML, therefore he has no DocumentStructure on it, which means this would be the way to go, or am I missing something?

Collectives™ on Stack Overflow

How to add Html Content to a new created Iframe in JS

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related