Load javascript after page load

Question

I have an external javascript that contains something like:

document.writeln("<script type='text/javascript' src='...'></script>");

In the original html i have something link

<div id="banner">
    <script type="text/javscript" src="<the external javascript above>"></script> 
</div>

How can i load that delayed?

I've tried using window.setTimeout and append that javascript but its not working.

Its important that the javascript to be loaded inside that div so the document.writeln executes in the right place.

Thank you.

Try the answer to this question: http://stackoverflow.com/questions/610995/jquery-cant-append-script-element — CompanyDroneFromSector7G, Feb 07 '12 at 10:11
@bukko - i've tried that but no luck. The writeln its not executed in same div. — keepwalking, Feb 07 '12 at 10:11
Strange - I posted as an answer but it comes up as a comment :/ — CompanyDroneFromSector7G, Feb 07 '12 at 10:11

score 2 · Answer 1 · answered Feb 07 '12 at 10:09

2

You can call your injection code on window.onload.

window.onload = function() {  
  inject();  
  doSomethingElse();  
};

window.onload will wait until all assets have finished downloading, such as images and scripts. After scripts are downloaded, you can inject your code to page.

answered Feb 07 '12 at 10:09

Samet Atdag

982
6
21

I know how to execute after the page was loaded, i want to be executed correctly. The JavaScript its not executed in the right place. – keepwalking Feb 07 '12 at 10:15

score 0 · Answer 2 · answered Feb 07 '12 at 10:15

0

Maybe a better way to do it would be to add a delay to the script.
Also, if you use something other than 'document.writeln' for example:

$('#banner').append(...);

you can better direct where it goes.

answered Feb 07 '12 at 10:15

CompanyDroneFromSector7G

4,291
13
54
97

Read the question again and you will see i already tried that – keepwalking Feb 07 '12 at 10:17
Can you show the code you tried? I use those all the time and they work fine. – CompanyDroneFromSector7G Feb 07 '12 at 10:18
Also, what is the script doing? Does it really need to execute within the div? You can manipulate elements from anywhere within your document, and ideally scripts should stay in the header. – CompanyDroneFromSector7G Feb 07 '12 at 10:23

score 0 · Answer 3 · answered Feb 07 '12 at 10:24

0

There is an open source javascript library for doing this kind of thing: http://labjs.com/

I have used it in the past and it worked very well.

answered Feb 07 '12 at 10:24

Steve

1,769
2
22
33

score 0 · Answer 4 · edited May 23 '17 at 09:59

Its important that the javascript to be loaded inside that div so the document.writeln executes in the right place.

That is not entirely true. Especially if the div is empty you could simply use: document.getElementById('banner').innerHTML = "<h1>HTML-Output here.</h1>"

Bukko's answer would work as well if you are using jQuery. My answer is pure Javascript. With this newfound freedom you should be able to simply put the loading of your script at the bottom of the page or use a custom body.onload() function Edit: or simply follow Samet's suggestions in conjunction with the .innerHTML. Hope this helps.

Load javascript after page load

4 Answers4