Javascript changing contents of an iFrame, from the inside of the iframe

Question

How to change the innerHTML of an iframe, from the inside of that iframe?

<iframe> foo <script> .... will change "foo" to "bar" ..... </script> </iframe>

Code inside the iframe doesn't have to do anything special, it just accesses the DOM normally. — Barmar
– Barmar, Commented Jul 16, 2018 at 23:42
An approach: document.body.innerHTML='new dom tree or text' — Ele
– Ele, Commented Jul 16, 2018 at 23:42

Daniel Beck · Accepted Answer · 2018-07-17 13:00:22Z

That's not how iframes work.

The innerHTML of the iframe tag is fallback content, to be displayed only when the browser does not support iframes. All current browsers (including screenreaders) do support them; unless your site needs to support truly ancient browsers (we're talking stuff from the mid-1990s, IE5 and below) this can generally be omitted, because it won't be shown to anyone.

Instead, use the src attribute on the iframe tag to point to a separate web page, which will act separately from the parent window.

<iframe src="this_page_will_be_shown_in_the_frame.html"> This is fallback content that will not be shown in any current browsers </iframe>

That framed page can have its own javascript and CSS which can modify its contents independently of the parent window -- so you'd modify the framed page from within the frame exactly the same way you'd modify it if it weren't inside a frame at all.

If the parent and the framed documents are on the same domain name, you can make the javascript from one affect the other -- by using window.parent from the frame or .contentWindow on the iframe node from the parent -- but by default both the CSS and javascript for each document will work separately and not affect each other.

Interesting, is it possible to send XMLHttpRequest to the this_page_will_be_shown_in_the_frame.html from the inside of that iframe? Would that need CORS or no because it's issued from "this_page_will..." ?
CORS only applies to code that crosses the frame boundary -- if the parent window tries to modify the contents of the frame, or vice-versa. The framed page can make its own ajax calls and modify itself exactly as if it were a normal, unframed web page. (But that js would need to be inside the framed page, nothing in the innerHTML of the iframe tag in the parent window will execute.)

Collectives™ on Stack Overflow

Javascript changing contents of an iFrame, from the inside of the iframe

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related