Javascript从iframe内部更改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>

Answer 1

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.