Geek Answers Handbook

Document.write Doesn't work when loading an external Javascript source

I am trying to load an external JavaScript file dynamically into an HTML element to preview the ad tag. The script is loaded and executed, but the script contains "document.write", which has a problem that executes correctly, but 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 make it work if

  • If I transfer the source to the same domain for testing
  • If the script has been modified to use document.createElement and appendChild instead of document.write, like the code above.

I have no way to modify the script since it is being created and hosted by a third party.

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

Thanks for the help!

+7
javascript
source share
4 answers

Another solution is to create an iframe, then load the script inside the 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();

Thus, document.write at the end of the script will not affect your site, just an iframe. You will need to customize the iframe to match the declaration.

+6
source share

It would be dangerous to load the external script tag asynchronously if it also contains document.write . Therefore, I would suggest either using document.write from your end:

 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>
+1
source share

You don't want document.write on $(function() (when dom is ready)

Remove the wrapper document .ready .

And move your - to </body> . ( or to the location of the container — 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

0
source share

I had the same problem and came up with a solution. Mine is a bit more complicated because my layout is generated on the client side after dom-ready, which means that I cannot include the script this way. This added an extra step for me, but it might not be an extra step for you if your layout is being created on the server side.

  • Create your URL. in your case, its from ajax request, in my case, its from user interaction
  • Upload a page with this URL (maybe send the URL to the server using the new form)

If you can display the include script on the server where it should be, do it and you will do it. Otherwise:

  1. Create a server-side div that is hidden and has a specific identifier. This will load the finished pre-dom script and run document.write correctly.
  2. Clear the contents of the div containing the script, now you have the html in the variable, and you can place it anywhere on your page!
0
source share

More articles:


All Articles