Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

document.write Not working when loading external Javascript source

Tags:

javascript

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

  1. If i move the the source to the same domain for testing
  2. 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!

like image 646
jadent Avatar asked Nov 04 '13 15:11

jadent


People also ask

Why does my external JavaScript file not work?

Most likely, the problem is that you are including your js file in a head tag or somewhere above your main content. By doing this, you are executing your js code before full html content has been attached. As a result, when your js code executes, it does not recognize any html element because there isn't any.

How do I write an external JavaScript file?

To include an external JavaScript file, we can use the script tag with the attribute src . You've already used the src attribute when using images. The value for the src attribute should be the path to your JavaScript file. This script tag should be included between the <head> tags in your HTML document.

Can we have a JavaScript written in an external document?

External JavaScript: JavaScript can also be used as external files. JavaScript files have file extension . js . To use an external script put the name of the script file in the src attribute of a script tag.


1 Answers

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.

like image 82
David Hellsing Avatar answered Sep 18 '22 00:09

David Hellsing