CODEWITHSUNDEEP
javascripthtml
Luuk Verhagen
Luuk Verhagen

Reputation: 360

Run external javascript file on load

We made a website through webnode.nl, because we hadn't enough time to make a website using html. Now we added a widget using a external site using a script tag with the link to this site. But through this widget the page is loading slow. Now I had the idea to run the script after the page is loaded. But I can't access the code of the widget and I can't access the html of the website. I can only access the code block in which I pasted the script tag.

The script tag:

<script type="text/javascript" src="http://mycountdown.org/countdown.php?cp2_Hex=d21a1a&cp1_Hex=F9F9FF&img=-3&hbg=&fwdt=420&lab=1&ocd=My Countdown&text1=Valentijnsdag!&text2=valentijnsdag!&group=My Countdown&countdown=My Countdown&widget_number=3015&event_time=1455408000&timezone=Europe/Amsterdam"></script>

Can someone help me?

PS: English is not my first language, so I don't know if my English is correct

Upvotes: 2

Views: 2787

Answers (2)

zer00ne
zer00ne

Reputation: 44086

if you can write script blocks then write the following in whatever you are allowed to use.

<script>
  // Create a <script ...></script> element
  var widget = document.createElement('script');

  // Set src="URL_of_widget"
  widget.setAttribute('src', 'http://mycountdown.org/countdown.php?cp2_Hex=d21a1a&cp1_Hex=F9F9FF&img=-3&hbg=&fwdt=420&lab=1&ocd=My Countdown&text1=Valentijnsdag!&text2=valentijnsdag!&group=My Countdown&countdown=My Countdown&widget_number=3015&event_time=1455408000&timezone=Europe/Amsterdam');
  
  // Set async
  widget.setAttribute('async', 'async');

  // Insert <script> as the last element child of <body>
  document.body.appendChild(widget);
</script>

Upvotes: 0

ZeroBased_IX
ZeroBased_IX

Reputation: 2727

Place it at the end of the <body> and add async to the script tag i.e.

<script async src=""></script>

More info here: http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html There is also the defer attribute.

Typically you want to use async where possible, then defer then no attribute. Here are some general rules to follow: If the script is modular and does not rely on any scripts then use async. If the script relies upon or is relied upon by another script then use defer. If the script is small and is relied upon by an async script then use an inline script with no attributes placed above the async scripts.

Edit You may be better using Defer:

defer downloads the file during HTML parsing and will only execute it after the parser has completed. defer scripts are also guarenteed to execute in the order that they appear in the document.

Upvotes: 2

Related Questions