ansaurus

Question

Dynamically inserting javascript into HTML that uses document.write

Answer 1

A:

Can I get some clarification first to make sure I get the problem?

document.write calls will add content to the markup at the point in the markup at which they occur. For example if you include document.write calls in a function but call the function elsewhere, the document.write output will happen at the point in the markup the function is defined not where it is called.

Therefore for this to work at all the Flickr document.write statements will need to be part of the content in element.innerHTML = content. Is this definitely the case?

You might quickly test if this should work at all by adding a single and simple document.write call in the content that is set as the innerHTML and see what this does:

<script>
  var content = "<p>1st para</p><script>document.write('<p>2nd para</p>');</script>"
  element.innerHTML = content;
</script>

If that works, the concept of document.write working in content set as the innerHTML of an element might just work.

My gut feeling is that it won't work, but it should be pretty straightforward to test the concept.

Jon Cram 2008-09-10 13:13:20

"document.write output will happen at the point in the markup the function is defined not where it is called." - Not true, I have a test page that proves it: http://jsbin.com/inuka

vsync 2009-09-24 19:09:29

Answer 2

A:

I created a simple test page that illustrates the problem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Document Write Testcase</title>
    </head>
    <body>
        <div id="container">
        </div>
        <div id="container2">
        </div>

        <script>
            // This doesn't work!
            var container = document.getElementById('container');
            container.innerHTML = "<script type='text/javascript'>alert('foo');document.write('bar');<\/script>";

            // This does!
            var container2 = document.getElementById('container2');
            var script = document.createElement("script");
            script.type = 'text/javascript';
            script.innerHTML = "alert('bar');document.write('foo');";
            container.appendChild(script);
        </script>
    </body>
</html>

This page alerts 'bar' and prints 'foo', while I expected it to also alert 'foo' and print 'bar'. But, unfortunately, since the script tag is part of a larger HTML page, I cannot single out that tag and append it like the example above. Well, I can, but that would require scanning innerHTML content for script tags, and replacing them in the string by placeholders, and then inserting them using the DOM. Sounds not that trivial.

Kamiel Wanrooij 2008-09-10 13:25:31

Answer 3

A:

So you're using a DOM method to create a script element and append that to an existing element and this then causes the content of the appended script element to execute? That sounds good.

You say that the script tag is part of a larger HTML page and therefore cannot be singled out. Can you not give the script tag an ID and target it? I'm probably missing something obvious here.

Jon Cram 2008-09-10 13:48:57

Answer 4

A:

In theory, yes, I can single out a script tag that way. The problem is that we potentially have dozens of situations where this occurs, so I am trying to find some cause or documentation of this behavior.

Also, the script tag does not seem to be a part of the DOM anymore after it gets loaded. In our environment, my container div remains empty, so I cannot fetch the script tag. It should work, though, because in my example above the script does not get executed, but is still part of the DOM.

Kamiel Wanrooij 2008-09-10 13:59:58

Answer 5

A:

document.write is about as deprecated as they come. Thanks to the wonders of JavaScript, though, you can just assign your own function to the write method of the document object which uses innerHTML on an element of your choosing to append the supplied content.

Mo 2008-09-10 14:03:25

Yes, but flickr uses document.write in their API, and I really need the content at the location of the script. I cannot change the API, and changing the element written to won't solve the problem.

Kamiel Wanrooij 2008-09-10 14:05:24

Answer 6

+6 A:

In general, script tags aren't executed when using innerHTML. In your case, this is good, because the document.write call would wipe out everything that's already in the page. However, that leaves you without whatever HTML document.write was supposed to add.

jQuery's HTML manipulation methods will execute scripts in HTML for you, the trick is then capturing the calls to document.write and getting the HTML in the proper place. If it's simple enough, then something like this will do:

var content = '';
document.write = function(s) {
    content += s;
};
// execute the script
$('#foo').html(markupWithScriptInIt);
$('#foo .whereverTheDocumentWriteContentGoes').html(content);

It gets complicated though. If the script is on another domain, it will be loaded asynchronously, so you'll have to wait until it's done to get the content. Also, what if it just writes the HTML into the middle of the fragment without a wrapper element that you can easily select? writeCapture.js (full disclosure: I wrote it) handles all of these problems. I'd recommend just using it, but at the very least you can look at the code to see how it handles everything.

EDIT: Here is a page demonstrating what sounds like the effect you want.

noah 2009-12-07 22:16:56

Interesting... I also developed a replacement for document.write to allow the dynamic loading of scripts: bezen.domwrite (http://bezen.org/javascript)

Eric Bréchemier 2009-12-07 22:27:16

Thanks! We worked around this some time ago, but this looks feasible!

Kamiel Wanrooij 2009-12-11 14:48:30

ansaurus

tags:

views:

answers:

Dynamically inserting javascript into HTML that uses document.write

related questions