Skip to main content

 

OCLC Support

Load multiple JavaScript files

CONTENTdm’s Website Configuration Tool has a single upload dialog for uploading JavaScript (Global settings > Custom > Custom Scripts). This is convenient if you have only a single custom function that you want to apply to your site, but it can become difficult to maintain if a monolithic JavaScript file needs to do several different things on different pages and in different contexts. The solution is to create a loader script that can link in separate, self-contained JavaScript files.

The idea here is that a single JavaScript file does nothing more than retrieves and loads additional JavaScript files. Those separate JavaScript files will still need to adhere to the CONTENTdm event lifecycle and execute at the appropriate time. The advantage of this approach is that each of these separate JavaScript files is self-contained and portable. There are no interdependencies among the script files that are being loaded.

Because the CONTENTdm Website Configuration Tool supports uploading only a single JavaScript file on the Custom Scripts dialog, the additional JavaScript files can be stored in another location using the file manager under the Custom Pages dialog. For more information about the file manager see Working with the file manager.

An example loader script is shown below. This script uses JavaScript promises to read the external JavaScript files and insert them into the DOM. This loader script is designed to be self-executing and is not triggered by an event in the page lifecycle. The external scripts will need to adhere to the lifecycle to make sure they execute at the correct time and on the correct pages.

The bottom section of the script is where you configure the file path and names of the external JavaScript files being loaded. In this example, the Custom Pages file manager was used to create a folder called “js” and the additional JavaScript files were uploaded to that folder.

'use strict';

// helper function to load js file and insert into DOM
// @param {string} src link to a js file
// @returns Promise

function loadScript(src) {
return new Promise(function (resolve, reject) {
var script = document.createElement('script');
script.crossOrigin = 'anonymous';
script.src = src;
script.onload = resolve;
        script.onerror = reject;
        document.head.appendChild(script);
    });
}

// helper function to assemble full URL of each JS file
function wholeUrl(file) {
return baseUrl + filePath + file;
}

const baseUrl = window.location.origin ? window.location.origin + '/' : window.location.protocol + '//' + window.location.host + '/';

// path corresponding to directory where JS scripts are uploaded
const filePath = 'customizations/global/pages/js/';

// array containing file names of each JS file
const scriptFilesToLoad =
['example1.js',
'example2.js',
'example3.js',
'example4.js',];

(function () {
const allScripts = scriptFilesToLoad.map(wholeUrl);
allScripts.forEach(loadScript);
})();

 

  • Was this article helpful?