How to create an external list of javascript files

Question

At the bottom of several of my website, I have a list of javascript/css reference files, such as

<link rel="stylesheet" href="http://domain.co.uk/general.css" />
<script src="http://domain.co.uk/jquery-3.2.1.min.js"></script>
<script src="http://domain.co.uk/jquery-ui.min.js"></script>
<script src="http://domain.co.uk/helpers.js"></script>

They all point to another website I have. This works as I only need to update the content of the files and since they all point to the same file location updates are easy.

The problem I have is, if I want to add a new file (javascript or css) then I have to add a new <script... or <link... to every website which has this list.

What I'd love to do is move that list into an external file, and reference it there.

EG

Website1

<link rel="stylesheets" href="http://domain.co.uk/myCssFiles.css" />
<script src = "http://domain.co.uk/javascriptFiles.js"> </script>

Website2

<link rel="stylesheets" href="http://domain.co.uk/myCssFiles.css" />
<script src = "http://domain.co.uk/javascriptFiles.js"> </script>

And as such, the content of myCssFiles.cs could be

<link rel="stylesheet" href="http://domain.co.uk/general.css" />
<link rel="stylesheet" href="http://domain.co.uk/general2.css" />
<link rel="stylesheet" href="http://domain.co.uk/general3.css" />

and likewise for the javascript.

How can I achieve this?

Please note, I control these websites and CORS isn't an issue.

If you have a server process like PHP then just include them. If not, search for "dynamically load jquery": https://stackoverflow.com/questions/10113366/load-jquery-with-javascript-and-use-jquery — mplungjan, Nov 05 '17 at 07:28
these site redirect to another site. did you check those file are exist in the server? — Shamsur Rahman, Nov 05 '17 at 07:48
I don't think the awnser is how to easely change the URL. I think that if you really want this you should put this on your own webserver. — StuiterSlurf, Nov 05 '17 at 08:01

Harsha Jayamanna · Answer 1 · 2017-11-05T07:59:29.843

Hope this helps,

You can have common.js to include all your js file

common.js

var scripts = {
"http://domain.co.uk/jquery-3.2.1.min.js",
"http://domain.co.uk/jquery-ui.min.js"
}

scripts.forEach(function(data) {
    var x = document.createElement('script');
    x.src = data;
    document.getElementsByTagName("body")[0].appendChild(x);
});

You can have a single common.js file and add links as u needed to the scripts array. You just have to include the common.js in your websites.

How to create an external list of javascript files

1 Answers1