ansaurus

Question

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

Answer 1

A:

I don't have time to fully debug is right now, but from a quick look on Firefox (development build) it looks like jquery is acting up:

document.documentElement.innerHTML
// gives the document source without the <script src>

document.documentElement.
  getElementsByTagName("iframe")[0].contentDocument.documentElement.innerHTML

// gives: <head><title></title></head><body></body>

A very interesting question, thanks!

Nickolay 2009-10-19 21:24:33

Hmm, that's interesting, Nickolay. Thanks very much for the help troubleshooting. I wonder if the code I wrote is technically valid, but just doesn't execute in the way that I expect/hope?

Bungle 2009-10-19 22:15:18

Answer 2

+1 A:

I didn't find an answer to my original question, but I did find another approach that works even better (at least for my purposes).

This doesn't use jQuery on the parent page (which is actually a good thing, as I'd prefer not to load it there), but it does load jQuery in the <iframe> in an apparently completely valid and usable way. All I'm doing is writing over the <iframe>'s document object with a new one created from scratch. This allows me to simply include a <script> element in a string which I then write to the <iframe>'s document object.

The code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>frame</title>
  </head>
  <body>

    <div id="test"></div>

    <script type="text/javascript">
      // create a new <iframe> element
      var iframe = document.createElement('iframe');

      // append the new element to the <div id="bucket"></div>
      var bucket = document.getElementById('test');
      bucket.appendChild(iframe);

      // create a string to use as a new document object
      var val = '<scr' + 'ipt type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"&gt;&lt;/scr' + 'ipt>';
      val += '<scr' + 'ipt type="text/javascript"> $(function() { $("body").append("<h1>It works!</h1>"); }); </scr' + 'ipt>';

      // get a handle on the <iframe>d document (in a cross-browser way)
      var doc = iframe.contentWindow || iframe.contentDocument;
      if (doc.document) {
        doc = doc.document;
      }

      // open, write content to, and close the document
      doc.open();
      doc.write(val);
      doc.close();
    </script>

  </body>
</html>

I hope this helps someone down the road!

Bungle 2009-10-19 22:09:12

This is exactly what I'm looking for. Is there any way to APPEND to the iframe so the body contents are not erased?

AnApprentice 2010-04-17 02:10:14

ansaurus

tags:

views:

answers:

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

related questions