Why Does Appending a <Script> to a Dynamically Created <Iframe> Seem to Run the Script in the Parent Page

Why does appending a script to a dynamically created iframe seem to run the script in the parent page?

Had the same problem, took me hours to find the solution.
You just need to create the script's object using the iframe's document.

var myIframe = document.getElementById("myIframeId");
var script = myIframe.contentWindow.document.createElement("script");
script.type = "text/javascript";
script.src = src;
myIframe.contentWindow.document.body.appendChild(script);

Works like a charm!

iframe append to parent

Just to help others, please refer to the following answers:

Why does appending a to a dynamically created seem to run the script in the parent page?

It works.

Inserting script into iframe with jQuery

You should set the source of new windows and iframes to 'about:blank' if you want control over them. Then reference it by the iframe's ID!

You also want to use iframe.contentDocument || iframe.contentWindow.document
And it might be a good idea to 'open()' the document before you 'write()' to it.

Update: forgot this: If you open the window about:blank, it needs time to load..
So you cannot write to it right away!!
So either set timeout of about 50ms (usually) and then write to the new window/iframe.

OR check if it is loaded (onload), then have it write the source (I prefer this).

If you need to reuse the iframe, set it to about:blank first (again) and wait or check onload again before writing to the frame again. All this is due to xss security.

I also strongly advise to use the traditional event-model (so no addEvent things, they don't work as intended crossbrowser and lead to memoryleaks in IE).

So: create iframe with src set to about:blank, add a onload function that checks a var containing your html-string: if it is empty, else: write it to the iframe and empty the string.

To update the iframe: set content to the var containing the html-string, followed by setting the source of the iframe to about:blank.

Understand the loop?

This baby even works in IE6...

Good luck!!

UPDATE: you did not escape your snippet properly: should be: <script>document.writeln('test')\<\/script>
See: jsfiddle

UPDATE2: argl.. I normally never give up, but since I don't care for jQuery, I'm not going through the manual for jQuery for something something so simple in something as difficult as jQuery (sorry). For modern (crappy) security reasons you need an about:blank. Period.

See this updated fiddle for the 'plain jane' basics at work, then see how to do it in jquery and make a choice: onload or setTimeout. I'm working on my own crossbrowser html-editor and this subject took over a week to figure out.

Dynamic iframe inserted into document that is standards mode defaults to quirks mode

This is because the browser is loading a basic html document (notice no doctype declaration):

<html>
   <head></head>
   <body></body>
</html>

Since there is no doctype declared Chrome will use BackCompat mode.

If you want it to be changed to a different mode either set the src url to a html page that uses a doctype declaration, or write to the iframe and set the html to one with a doctype.

var myContent = '<!DOCTYPE html><html><head></head><body></body></html>';

$("body").append("<iframe id='test-iframe'></iframe>");
var frame = $("#test-iframe")[0];
frame.contentWindow.document.open('text/htmlreplace');
frame.contentWindow.document.write(myContent);
frame.contentWindow.document.close();
console.log( frame.contentWindow.document.compatMode );

JSFiddle

Why Does Appending a <Script> to a Dynamically Created <Iframe> Seem to Run the Script in the Parent Page