Skip to content

September 8, 2015

How to add javascript using CMS after execution of other scripts

Suppose you have working site based on CMS, and you need to add some specific functionality only for part of this site using CMS. And your change should affect only this part of a site. So how we can add our new JavaScript after execution of existing scripts without adding it in templates, after other scripts?

We can use good old vanilla JavaScript for this purpose. Let’s create a file with JavaScript which should be launched after other scripts. Let’s call it ‘my-last-script.js’. Then we need to upload it using CMS to some folder, which is accessible from our web page. After that we should copy a path to this script, for example, it can be: ‘/shared/my-last-script.js’ path. You can check if it’s working path trying to open this script like a text file using full URL, for example: ‘http://mywebsite.com/shared/my-last-script.js’, it should open existing on your server JavaScript file.

Now we can ready to write a script for adding our JavaScript after execution of other scripts.

First thing, that we should keep in mind, that our script should be runned only after other scripts will finish their work. To achieve execution of script after loading a page we can use the ‘onload’ event, and run our function only after firing off that event:
window.onload=function() {}

Now we can put our code inside {}.

Let’s create a ‘<script>’ element:
var script = document.createElement('script');

Next thing, is to put relative path to our script (in our case it’s ‘/shared/my-last-script.js’):
script.src = "/shared/my-last-script.js";

Now we have two lines of code:
var script = document.createElement('script');
script.src = "/shared/my-last-script.js";

Now this ‘<script>’ element exists in memory, but not actually in our DOM. So, where we should put this ”<script>’ ‘ element? We should add it after other ‘<script>’ elements.

To make such thing, we should get collection of our ‘<script>’ elements already existing in DOM:
var scripts = document.getElementsByTagName("script");
Now, in ‘scripts’ variable we have collection of ‘<script>’ elements, and we can access them like in array and easily can select the last element. The index of the last element will be equal to number of existing items minus 1, because a first element in array in JavaScript starts from 0.

So the last thing that we should is, to select last ‘<script>’ element, and add our virtual script physically after selected one. It can be done in one line:
scripts[scripts.length-1].parentNode.appendChild(script);
The second part actually is selection of Parent of the last ‘<script>’ element and insertion of our script to DOM – parentNode.appendChild(script).

Finally, we should get basic implementation of this solution:

window.onload=function() {
var script = document.createElement('script');
script.src = "/shared/my-last-script.js";
var scripts = document.getElementsByTagName("script");
scripts[scripts.length-1].parentNode.appendChild(script);
}

Of course real world case scenario can be more complex if we are going to deal with specific CMS, but this basic idea can be easily transformed to a more advanced script.