Including links with Javascript

Prerequisites

To understand this tutorial it is reccomended that you have a basic understanding of Javascript, HTML and CSS. You can probably work out how to do this without any prior knowledge though.

Introduction

No one want's a bunch of links at the top of their files. Having lots of links to css, js and php files is sometimes in-avertable but it leads to messy HTML. Another problem with having many files, especially external links to other files not on your website is that if they change, you have to go to every page where you have referenced these files and change the link which is an exhausting task. We can pretty much get around this by loading all the files we want by using javascript, and then linking each page on our website to this one file allows us to load many files with one link.


So, its ok to be a bit confused right now to what this actually does, its much easier to understand through examples. Lets get started, so we have a multi-page website with lots of different links in our meny as seen below:

HTML

index.html
        
<html>
  <head>
    <title>Example</title>
    <script type="text/javascript" src="links.js"></script>
    <script src="index.js" type="text/javascript"> </script>
    <link href=" https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css" type="text/css" rel="stylesheet" /> 
    <link href="universal.css" type="text/css" rel="stylesheet" />
    <script src="universal.js"></script>
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
  </head>
  <body>
   <!--Random body stuff here -->
  </body>
</html>
        
      


So, as you can see, sometimes files build up and it gets really messy to have them at the top of every page on your website, especially if you website has more that 5 pages. Lets say that every other page on our website also requires access to bulma, universal.css, universal.js and we also want font awesome to be on every page. So, lets make a file called "links.js" which will include all of the above links for us.


Javascript

links.js
        
function loadjscssfile(filename, filetype){
    // we will put our code here.
}
loadjscssfile("https://use.fontawesome.com/releases/v5.0.7/js/all.js", "js")
loadjscssfile("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css", "css")
loadjscssfile("universal.css", "css")
loadjscssfile("universal.js", "css")
        
      


Now we have written a function that accepts two paramaters, filename and filetype. We have also called this function 4 times, with our 4 different files and their types. What we want to do now is make a function that wil load all of these files that we call the funtion with. Lets start off by checking out the file extenstion by creating some if statements.

Javascript

links.js
        
function loadjscssfile(filename, filetype){
    if (filetype=="js"){
    // is a js file
    }
    else if (filetype=="css"){
    // is a css file
    }
    if (typeof fileref!="undefined"){
    // is not a css or js file
    }
}
loadjscssfile("https://use.fontawesome.com/releases/v5.0.7/js/all.js", "js")
loadjscssfile("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css", "css")
loadjscssfile("universal.css", "css")
loadjscssfile("universal.js", "css")
        
      


Now we know what each file wants to load. So now lets add our loading code that will load the files into our page.

Javascript

links.js
        
function loadjscssfile(filename, filetype){
    if (filetype=="js"){
        var fileref=document.createElement('script') // 1
        fileref.setAttribute("type","text/javascript") // 2 
        fileref.setAttribute("src", filename) // 3
    }
    else if (filetype=="css"){ //if filename is an external CSS file
      var fileref=document.createElement("link") //4 
      fileref.setAttribute("rel", "stylesheet") // 5
      fileref.setAttribute("type", "text/css")
      fileref.setAttribute("href", filename)// 7
    }
    if (typeof fileref!="undefined"){
      document.getElementsByTagName("head")[0].appendChild(fileref) //7
    }
}
loadjscssfile("https://use.fontawesome.com/releases/v5.0.7/js/all.js", "js")
loadjscssfile("https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css", "css")
loadjscssfile("universal.css", "css")
loadjscssfile("universal.js", "css")
        
      

Give that a test run, and it should work. If you are having issues, make sure that your HTML now looks like below as we no longer need all those excess files.

HTML

index.html
        
<html>
  <head>
    <title>Example</title>
    <script type="text/javascript" src="links.js"></script>
    <script src="index.js" type="text/javascript"> </script>
  </head>
  <body>
   <!--Random body stuff here -->
  </body>
</html>
        
      

We now only have 2 links, one to the links.js which will load all our other files and the other to index.js as we want the index.html to have different javascript to all the other pages. If you want to test this simply, make a index.html and links.js. On both pages have "Hello World" in h1 tags and have a stylesheet with some styling for the h1 tag. Then endit the links.js to load in your css file, and the h1 tags should be as you have styled them.

Here is a working (very simple) demo below:



I would usually provide a fiddle, but because the files in fiddles are already linked up I thought it more beneficial to make an example which can be found here.

Hopefully that helped you to make your HTML neater and be able to modify links with easy, which is extremely helpful when something like fontawesome updates their script link. If you have any questions of comments, post below.


Last Updated: 6/3/2018, Created 3/3/2018

JS 5
HTML 5
Tutorial Version 1