Question

I’m attempting to insert a snippet into an iframe through jQuery with the following:

var snippet = "<script>document.writeln('test')</script>";

jQuery('<iframe />').appendTo('body').append(snippet);

instead of writing “test” in the iframe, it overwrites the parent window.

How can I make it so that the parent window gets the iframe with “test” inserted in it?

Answer 1

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.