Nested document.writes and third party ads not working in IE!!!! Any workaround that is safe?

Question

NOTE: I edited this with more info of what I am getting back from the third party.

In a nutshell I have a task to include a JS ad tag that calls to our internal ad server mechanism which then retries a third party script that document.writes to their external file... it will not work in IE. Someone mentioned to me that nested document.writes will not work in IE. I have tried various things.. appendTo / writeln / breaking up the script tag / decoding the script tags etc.. nothing seems to work. Since this is somewhat new to me, perhaps I am overlooking the obvious.

This is what it looks like:

my html:
<script language="JavaScript" type="text/javascript">
   document.write('\x3Cscript type="text/javascript" src="_some_Path_to_internal_ad_server">\x3C/script>';);
</script>

That call ends up bringing in some code that looks like this: just as you see, no enclosing script tags.

   tl1 = '989';
   tl2 = 'xnlll';
   document.write('<script type=\"text/javascript\" src=\"_some_Path_to_third_party.js\"><\/script>');

Now, that "_some_Path_to_third_party.js" brings in some js code that has document.writes and document.writeln

I am writing this off the top of my head, so I don't remember exactly how the script tags are broken up, but I don't believe that is the issue. I believe it is the nested document.writes in IE.

I tried various things and even laid out my first script call right in my page. No document.writes -- just

<script language="JavaScript" type="text/javascript" src="_some_Path_to_internal_ad_server">

No dice.

BUT a direct call to the external js did work (removing my call to my internal ad server which subsequently calls the third party call), ala:

<script language="JavaScript" type="text/javascript" src="_some_Path_to_internal_ad_server">

Anyone have experience dealing with anything likes this and how to overcome it?

Answer 1

Since you didn't post enough details to write a complete answer to your problem (you write: "I am writing this off the top of my head, so I don't remember exactly how the script tags are broken up") so here are some general tips to get you started instead of a direct solution. You say that you are convinced that the problem is with too much of document.write calls so I will concentrate on minimizing their number wherever possible. Hopefully it will let you eventually solve your problem.

Extra semicolon

In your first example you have:

document.write(' ... ';);

Removing the extra semicolon it would be:

document.write(' ... ');

Could that be causing some problems? If not then read on...

First of all some basics:

Script type and language

<script language="JavaScript" type="text/javascript">

The "language" attribute is deprecated so don't use it. The problem with the "type" attribute is that text/javascript MIME type is obsolete (see RFC4329) and application/javascript (the correct type) is not universally supported. In practice every browser has always known that without "type" it's just JavaScript and that's why I recommend to leave it out for every markup version where it is optional, like HTML5. (Besides the MIME type is something that should be specified by the server.) See this question for more info. That having been said, I will just use <script> in the examples below.

Minimizing document writes

Having this in your HTML:

<script>
    document.write('\x3Cscript src="file.js">\x3C/script>');
</script>

Is exactly equivalent to:

<script src="file.js"></script>

It make so sense to use document.write in this case, unless you are building the script name dynamically in JavaScript or something like that, but even then you can do it without document.write.

If you don't know the path of your script and you are using eg. a JavaScript variable named path then you may be tempted to write something like this:

<script>
    document.write('\x3Cscript src="' + path + '">\x3C/script>');
</script>

But you can achieve pretty much the same result with something similar to what Google uses for Analytics:

var newScript = document.createElement('script');
newScript.src = path; // or newScript.src = 'file.js';
var firstScript = document.getElementsByTagName('script')[0];
firstScript.parentNode.insertBefore(newScript, firstScript);

Or shorter, using appendChild:

var newScript = document.createElement('script');
newScript.src = path; // or newScript.src = 'file.js';
document.body.appendChild(newScript);

Or easier using jQuery:

$('<script />', {src: path}).appendTo('body');

where path is the URL of your script. Or partially using jQuery just for the insertion into the DOM:

var newScript = document.createElement('script');
newScript.src = path; // or newScript.src = 'file.js';
$('body').append(newScript);

You may also be able to use jQuery.getScript:

$.getScript(path);

More ideas

For other ideas see:

• Google Analytics code asynchronous syntax
• Google Analytics code traditional syntax (with document.write)
• jQuery getScript
• YUI Get
• RequireJS

These are some basic things you can do to minimize the use of document.write. Hopefully this will get you started.