Home/ Questions/Q 8279651
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T09:24:05+00:00

I want to use Head JS to dynamically load all of the other scripts

  • 0

I want to use Head JS to dynamically load all of the other scripts for my pages. I’m planning on using the version hosted by CDNJS to take advantage of the better caching, decreased latency, etc.

I have no reason to think CDNJS is going anywhere, but even for Google CDN hosted files like jQuery, I like to include a fallback. When I’m using jQuery though, the files are included at the end of the <body> tag. Due to the nature of Head JS, I need to include it in the <head> of my page.

In the <body> I would use two lines like this:

<script src="http://cdnjs.cloudflare.com/ajax/libs/headjs/0.96/head.min.js"></script>
<script> window.head || document.write('<script src="js/libs/head-0.96.min.js"><\/script>') </script>

Can I use this same set of lines in the head as a fallback? Won’t document.write() overwrite my entire page? Don’t scripts load differently when they exist in the <head> due to the order that browsers parse the DOM?

I’m still pretty new to this, so any guidance would be hugely helpful! Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As you probably already know, you won’t be testing for window.jQuery but some function included in head.js.

    Additionally, you’re right that you may not want to use document.write() twice here.

    Instead of document.write(), try this: 

    function appendScript(url) {
  var head = document.getElementsByTagName('head')[0];
  var theScript = document.createElement('script');
  theScript.type = 'text/javascript';
  theScript.src = url;
  theScript.onreadystatechange = callback;
  theScript.onload = callback;
  head.appendChild(theScript);
}

    For the url, use your local fallback.

    • 0