document.write Not working when loading external Javascript source

Question

I'm trying to load an external JavaScript file dynamically into an HTML element to preview an ad tag. The script loads and executes but the script contains "document.write" which has an issue executing properly but there are no errors.

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript">
        $(function() {
            source = 'http://ib.adnxs.com/ttj?id=555281';

            // DOM Insert Approach
            // -----------------------------------
            var script = document.createElement('script');
                script.setAttribute('type', 'text/javascript');
                script.setAttribute('src', source);

            document.body.appendChild(script);
        });
        </script>
    </head>

<body>
</body>
</html>

I can get it to work if

If i move the the source to the same domain for testing
If the script was modified to use document.createElement and appendChild instead of document.write like the code above.

I don't have the ability to modify the script since it being generated and hosted by a 3rd party.

Does anyone know why the document.write will not work correctly? And is there a way to get around this?

Thanks for the help!

Why aren’t you just putting the script tag inside the element where you want the ad to appear? Most likely, this is how the ad script is designed. — David Hellsing
– David Hellsing, Commented Nov 4, 2013 at 16:05
Because I'll be receiving the the URL of the script source through an ajax call. This cannot be rendered from a backend script — jadent
– jadent, Commented Nov 4, 2013 at 16:07
so... how do you expect the ad script to know where to place the ad? — David Hellsing
– David Hellsing, Commented Nov 4, 2013 at 16:08
the ad script is doing a document.write were ever the script is being executed. so trying to place it inside a div on the page so it will document.write it's code inside the div tag. of course this is the nature of the problem since i cannot find code to do this — jadent
– jadent, Commented Nov 4, 2013 at 16:51

David Hellsing · Accepted Answer · 2013-11-04 16:20:11Z

9

Another solution is to create an iframe, then load the script inside that iframe when the ajax call is ready:

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;

// do this whenever you want (f.ex after ajax is made):
doc.open();
doc.write('<script src="http://ib.adnxs.com/ttj?id=555281">\x3C/script>');
doc.close();

That way, the document.write in the end script will not affect your site, just the iframe. You will need to style the iframe to fit the ad.

answered Nov 4, 2013 at 16:20

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

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

1 Comment

jadent Over a year ago

this might be the only answer. since we don't know the size we'll have to grab the content width & height inside the iframes after it's loaded. hacky but will probably work.

David Hellsing · Accepted Answer · 2013-11-04 15:53:18Z

1

It would be potentially dangerous to load an external script tag asynchronously if it also contains document.write. So I would suggest either using document.write at your end as well:

document.write('\x3Cscript src="http://ib.adnxs.com/ttj?id=555281">\x3C/script>');

Or just a script tag (duh):

<script src="http://ib.adnxs.com/ttj?id=555281"></script>

answered Nov 4, 2013 at 15:53

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

3 Comments

Royi Namir Over a year ago

IMHO there is no need for the initial \x3c in \x3Cscript only for the closing tag.

David Hellsing Over a year ago

@RoyiNamir probably true, I just copy/pasted it from some old snippet... :)

jadent Over a year ago

Can't just use a script tag since the url is dynamically loaded via an ajax call from a web service. Document.write in this case

Royi Namir · Accepted Answer · 2013-11-04 16:06:12Z

0

You do not want document.write on $(function() ( when dom is ready )

Remove the document .ready wrapper.

And move your to - before </body> . ( or to the container location - where you want the widget to appear.)

so :

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    </head>

<body>

//bla bla...

<script type="text/javascript">

  (function (){

           var source = 'http://ib.adnxs.com/ttj?id=555281';

            // DOM Insert Approach
            // -----------------------------------
            var script = document.createElement('script');
                script.setAttribute('type', 'text/javascript');
                script.setAttribute('src', source);
                document.body.appendChild(script);
   })();

</script>
</body>
</html>

Important :

enter image description here

edited Nov 4, 2013 at 16:06

answered Nov 4, 2013 at 15:42

Royi Namir

149k145 gold badges503 silver badges833 bronze badges

4 Comments

Royi Namir Over a year ago

@David yes. changed the word. :-) - I meant the same. ( if he want users to see his site - he can not do it / should not do it.).

David Hellsing Over a year ago

yes true, however, if the script with document.write is loaded async it will probably also clean up the DOM since the request takes some time to perform. See this demo: jsbin.com/OhUDIJE/2/edit

Royi Namir Over a year ago

@David yes agree. ( actually there are better chances for this to happen with defer as opposed to async - cuz defer is certainly when dom is ready... a -too late event).

jadent Over a year ago

Tried the above code but still doesn't execute the document.write. Tried in FF & Chrome. Are you seeing the ad display when doing this?

Allen Rice · Accepted Answer · 2014-12-08 01:22:12Z

I had the same problem and came up with a solution. Mine is a little more complex I think because my layout is generated on the client side, after dom-ready, which means I can't render the script include that way. This added an extra step for me, but it might not be an extra step for you if your layout is generated on the server side.

Generate your URL. in your case, its from an ajax request, in my case, its from user interaction
Reload the page with this URL (maybe POST the URL to the server with a newly created form)

If you're able to render the script include on the server, right where it should be, do that and you'll be done. Otherwise:

Create a div on the server side that is hidden, and has a particular ID. This will load the script pre dom-ready and properly fire off document.write.
Scrape the contents of the div that contains the script, you now have the html in a variable and you can put that anywhere on your page!

Collectives™ on Stack Overflow

document.write Not working when loading external Javascript source

4 Answers 4

1 Comment

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related