This allows for easy manipulation and extension of URL fragments, as well as handling custom events based on the URL hash.
npm install url-fragment-extenderurl-fragment-extender that provides functionality to read and manipulate URL fragments. You can install url-fragment-extender using this command:
npm install url-fragment-extender
Here is also a DEMO
``html
// STEP 3. Import the module.
importModules(['url-fragment-extender'], function (UFE) {
UFE.on('', function (event) {
$('#content').innerHTML = '';
//I am live. Continue listening.
return true;
});
UFE.on('temp_1', function (event) {
$('#content').innerHTML = $('#temp_1').innerHTML;
//I am live. Continue listening.
return true;
});
UFE.on('temp_2', function (event) {
$('#content').innerHTML = $('#temp_2').innerHTML;
//I am live. Continue listening.
return true;
});
UFE.on('temp_3', function (event) {
$('#content').innerHTML = $('#temp_3').innerHTML;
//I am live. Continue listening.
return true;
});
});
// STEP 2. Add module import function.
/**
* Module import function - step 2.
* @param {string[]} importIdentifierArray Modules to import.
* @param {(...importModules:any[]) => void} callback Callback function.
*/
function importModules(importIdentifierArray, cb) {
var thisScope = "undefined" != typeof globalThis
? globalThis
: "undefined" != typeof window
? window
: "undefined" != typeof global
? global : "undefined" != typeof self
? self
: {};
if (!thisScope.modules) { thisScope.modules = {}; }
waitModules();
function waitModules() {
if (importIdentifierArray.length) {
for (let i = 0; i < importIdentifierArray.length; i++) {
if (!thisScope.modules[importIdentifierArray[i]]) { return setTimeout(waitModules, 10); }
}
}
cb.call(thisScope, ...importIdentifierArray.map(function (id) { return thisScope.modules[id]; }));
}
}
function $(selector, element) { return (element || document).querySelector(selector); }
template 1
template 2
template 3
``
This project is licensed under the MIT License.
Copyright © Manuel Lõhmus

Donations are welcome and will go towards further development of this project.