Inserting <script> into iframe with jQuery

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?

Is the iframe dynamically created or does it already exist in the parent window before you write to it? — GitaarLAB
– GitaarLAB, Commented Jul 31, 2012 at 1:07
its being generated from that 2nd line, but it doesn't actually matter — badunk
– badunk, Commented Jul 31, 2012 at 1:21
possible duplicate of Why does appending a <script> to a dynamically created <iframe> seem to run the script in the parent page? — badunk
– badunk, Commented Jul 31, 2012 at 1:28

GitaarLAB · Accepted Answer · 2012-07-31 02:41:56Z

2

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.

edited Jul 31, 2012 at 2:41

answered Jul 31, 2012 at 1:05

GitaarLAB

14.7k12 gold badges62 silver badges83 bronze badges

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

3 Comments

badunk Over a year ago

thanks for the tip, but that did not fix the issue. In one test I put some static iframe on the page with about:blank and executed the 2nd line in my example (injecting the <script>) through the web inspector console. It should have given it enough time to load, but the results are the same

badunk Over a year ago

turns out the open/write/close may be the key - let me double check ;)

GitaarLAB Over a year ago

did a massive update to my answer. Should contain everything you need to know (to translate to jquery, if you still want to use jquery..)

Collectives™ on Stack Overflow

Inserting <script> into iframe with jQuery

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related