jQuery & document.write

Question

I have the following script:

<script type="text/javascript">
$(document).ready(function(){ 
    document.write("<script type=\"text/javascript\" src=\"http://site.com/script.js\"><\/script>");
});
</script>

When I put this into the page, it redirects to the script, which I do not want.

I want to echo this javascript file where I insert the code above, so it is loaded once the page has. Currently when I am using the script above, it is only displaying the contents of the javascript file, and not the whole page.

I want it to put it into the page where I place this script.

I'm doing this so that the script its calling is basically loaded in place once the page has, as currently this script is causing the page to hold up while it loads.

Thank you.

Obviously I don't want the page to redirect to the javascript file, I want it to write the script inside the page. I will edit my question and explain it in laymen terms. — Latox, Nov 08 '11 at 10:51
There is a syntax error with the quotes as you close the `src` parameter - is this just a typo? — Rory McCrossan, Nov 08 '11 at 10:52
It's not laymans terms I was hinting at. You didn't ask a question. That was my point. — Jamie Dixon, Nov 08 '11 at 10:52
@RoryMcCrossan yes that is just a typo in the example, my bad. — Latox, Nov 08 '11 at 10:57

score 10 · Accepted Answer · answered Nov 08 '11 at 10:51

10

Try:

$(document).ready(function(){ 
    $('body').append("<script type=\"text/javascript\" src=\"http://site.com/script.js\"><\/script>");
});

document.write will add to the document when called before the document is loaded, but after that it'll replace the existing content.

answered Nov 08 '11 at 10:51

Matt

74,352
26
153
180

1

I tried this before posting and this doesn't seem to work either. – Latox Nov 08 '11 at 10:55
1

@Latox: [Works for me](http://jsfiddle.net/E7tgQ/); check the network viewer in Developer tools to see the request being made. – Matt Nov 08 '11 at 10:57
1

The network tool loads a script containing: document.writeln(' – Latox Nov 08 '11 at 11:00
1

@Latox: Well then you need to post the code your actually using, because that line of code has appeared out of thin air. – Matt Nov 08 '11 at 11:01
1

No it hasn't appeared out of thin air. It is what is contained inside the script.js in the question, I do not control this script. It is provided to me from an advertising provider. – Latox Nov 08 '11 at 11:03
1

Here is the document I'm working with: http://adserving.cpxadroit.com/tags2/4-1009388.js - basically put this in a page with content above and below it, the content below it doesn't load until the page has loaded. I want the page to load regardless of the ad loading as it is quite annoying seeing half of a website while waiting for an advertisement to load. Hence me wanting the advertisement to load once the page has finished loading. – Latox Nov 08 '11 at 11:05

score 6 · Answer 2 · answered Nov 08 '11 at 10:53

6

Try this:

$(function() {

    $.getScript("http://site.com/script.js");
});

$.getScript also allows you to have function that is called after the script successfully executes.

answered Nov 08 '11 at 10:53

grc

22,885
5
42
63

Rob Cowie · Answer 3 · 2011-11-08T11:04:36.420

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    </head>
    <body>
        <!-- content here... -->
    </body>
    <script>
        $.getScript('http://site.com/script.js');
    </script>
</html>

Put the script at the end of your page to 'defer' script execution. Use jQuery.getScript() to fetch and execute the script.

EDIT For the avoidance of doubt, added query. Obviously it is needed early to allow $.getScript to work.

score 1 · Answer 4 · answered Nov 25 '14 at 09:39

This might be a cleaner approach:

$(document).ready(function(){ 
    $('<script>')
        .attr('type', 'text/javascript')
        .attr('src', 'http://www.example.com/script.js')
        .appendTo('body');
});

Or:

$(document).ready(function(){ 
    $('<script>')
        .attr({'type': 'text/javascript', 'src': 'http://www.example.com/script.js'})
        .appendTo('body');
});

score 0 · Answer 5 · answered Nov 08 '11 at 10:53

To decouple the main page loading from the ad loading, you can put the ad in its own page in an iframe or, similarly, download the script file with AJAX and execute it whenever it comes down. If the former is not adequate, because of referring URI or whatever, the latter gives you some flexibility: you could use string replacement to rewrite "document.write" to something else, or perhaps temporarily replace it like "document.write = custom_function;"

jQuery & document.write

5 Answers5