Hosting js file in git hub pages
I am developing a custom template for Canvas LMS and Canvas allows to upload .js and .css file. To test any changes in .js I have to re-upload .js and refresh which is time consuming. So to get around this situation I thought about hosting one js file in Git and upload another js script in Canvas with some code to facilitate link between .js (Canvas and Git).
It works but, when I commit new changes then it stops working. In brief it fails to read latest commit and keeps loading previous commit.
Codes that I am testing with are provided below:
Canvas.js is the script that I upload in Canvas LMS:
var path = 'https://cdn.jsdelivr.net/gh/G0dS0n/Scaffold@main/script.js';
(function() {
var script = document.createElement('script');
script.src = path;
script.async = true;
script.charset = "UTF-8";
script.onload = function() {
console.log("Script from GitHub loaded successfully!");
};
script.onerror = function() {
console.error("Failed to load the script from GitHub.");
};
document.body.appendChild(script);
})();
Index.html
<body>
<p><a class="customAlertLink" href="#">Click Me!</a></p>
</body>
myScript.js (Uploaded in git)
document.addEventListener("DOMContentLoaded", function() {
var link = document.querySelector(".customAlertLink");
if (link) {
link.addEventListener("click", function(event) {
event.preventDefault();
alert("This alert is from the script hosted on GitHub!");
});
}
});
It works but, when I commit new changes then it stops working. In brief it fails to read latest commit and keeps loading previous commit.
Codes that I am testing with are provided below:
Canvas.js is the script that I upload in Canvas LMS:
var path = 'https://cdn.jsdelivr.net/gh/G0dS0n/Scaffold@main/script.js';
(function() {
var script = document.createElement('script');
script.src = path;
script.async = true;
script.charset = "UTF-8";
script.onload = function() {
console.log("Script from GitHub loaded successfully!");
};
script.onerror = function() {
console.error("Failed to load the script from GitHub.");
};
document.body.appendChild(script);
})();
Index.html
<body>
<p><a class="customAlertLink" href="#">Click Me!</a></p>
</body>
myScript.js (Uploaded in git)
document.addEventListener("DOMContentLoaded", function() {
var link = document.querySelector(".customAlertLink");
if (link) {
link.addEventListener("click", function(event) {
event.preventDefault();
alert("This alert is from the script hosted on GitHub!");
});
}
});
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time ๐.
36,263Members
Resources
Similar Threads
Was this page helpful?
