We Keep Coding

How to add dynamic timestamps for JS includes in static HTMLfile

So I have an interesting problem. I have a static site with some HTML files having javascript includes. Is there a way I can add a dynamic timestamp to these JS files in order to override caching and to have the latest version fetched.
Like:
<script async src="://main.lib.js?ts=1606903654"></script>
Earlier I could do this since the HTML was being generated dynamically using PHP. This is no longer the case and I am wondering how I can do this.
Any suggestions would be great!

Create your script element with JS and append it to HEAD.
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = "://main.lib.js?ts=" + new Date().getTime();
script.async = "async";
head.appendChild(script);

Extending #alexP 's answer to enable the timestamp to remain constant for at max an hour.
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = "://main.lib.js?ts=" + Math.floor((new Date()).setMinutes(0) / 100000);
script.async = "async";
head.appendChild(script);
However, I'm not certain if caching will work because it depends on the headers you send with the js file. In simple terms, if the caching works then you don't need this timestamp

Load external javascript after click a button

I want to load a javascript from an external source on my site, after clicking on a button.
I tried the following solution. Java script code, which is executed after clicking on the button:
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "scrSource";
document.getElementsByTagName("head")[0].appendChild(script);
So now I can see the javaScript in my head, but it was not executed.
So when I load my external script with the normal way (when the page is loading) in the header, it loads a few other java script sources.
But with my solution (load file after clicking a button), I only put it in the head and no further action is happening.
Do someone have any ideas how I can solve this problem? (and I´m not allowed to use jQuery, only java script)

function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||
script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
loadScript("https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js", function(){
//initialization code
alert('loaded: ' + faker.name.findName());
});
A simple Google search of "Load external javascript" returns this link. The function you see it is from there. It's and old one but it works.
I use Faker.js to generate random data as confirmation that the library loaded is ready to be used.
It handles onreadystatechange/onload so you can define a callback to start using the library you've just downloaded.

Javascript: best way to wait for script loaded synchonously before executing function?

I have the following problem:
I load a page inside a modal dialog. This page uses jQuery as dependency. Since I already use jQuery on the main page, for me, it is always available. Now we have the usecase, that also different pages (hosted on different domains) need to load that page if necessary.
So, I check if the jQuery variable exists on this page and if yes, just go on with my code.
If it does not exist, on top of the template, I dynamically create a script element like this:
<script>
if(!window.jQuery)
{
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "path/to/jQuery";
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
And at the end of the template, I use a IIFE (to scope the jquery variable)
(function ($) {
.... code ....
})(jQuery);
However, since with this method, the script gets loaded asynchronously, sometimes I get the error: jQuery is undefined.
Now I came up by loading it synchronously, like this:
var xhrObj = new XMLHttpRequest();
// open and send a synchronous request
xhrObj.open('GET', "jquery.min.js", false);
xhrObj.send('');
// add the returned content to a newly created script tag
var se = document.createElement('script');
se.type = "text/javascript";
se.text = xhrObj.responseText;
document.getElementById('placeholder').appendChild(se);
This works fine, but the warning "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. to the end user's experience." made me think.
However, now I changed my code and just said
if (!window.jQuery) {
document.write('<scr' + 'ipt src="jquery.js"' + '>' + '</scr' + 'ipt>');
}
on top of my Template.
Dear javascript gurus, is this a reliable solution?

Use the onload attribute in async javascript
<script async src="siteScript.js" onload="window.MyInitialisation()"></script>
In javascript it would look like this:
<script>
if(!window.jQuery)
{
var script = document.createElement('script');
script.type = "text/javascript";
script.async = "async";
script.defer = "defer";
script.onload = function() {window.MyInitialisation()}
script.src = "path/to/jQuery";
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>

Adding external Javascript file based on url string

I am attempting to load an external JS file to the end of the body if the URL does not container a given parameter. Here is what I have tried without any success. I am looking to load the file if the URL does not contain ?A=Edit
if (/[?]A=Edit/.test(window.location.href)) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/js/inner-functions.js';
$('body').append(script);
}
If anyone can point me in the right direction that would be great.

Just inverse your condition:
if (!/[?]A=Edit/.test(window.location.href)) {
...

You should verify your application context/state inside your .js file, not outside.

Method to see jQuery files are loaded completely then execute the function related to it

Method to see jQuery files are loaded completely then execute the function related to it
I want to show my div only when all the jQuery files related to that div is loaded.
document ready and window load function doesn't work.
How to write a conditional function where u can check whether all the jQuery is loaded then show the div.... i am calling all my jQuery files in an external js file, (basically i am trying to create a plugin for my client so that my external.js file will work from my server remotely).
my external.js file goes like this:
if (typeof jQuery === "undefined") {
var script = document.createElement('script');
script.src = 'js/jquery-1.7.1.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
if (typeof jQuery === "undefined") {
var script = document.createElement('script');
script.src = 'js/fancybox.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
document.ready = function() {
$(document).ready(function(){
$("#addimage").html("<a id='fancybox' href='large"+clientID+".jpg'><img border=0 src='thumb"+clientID+".jpg'/></a>");
}
});
so i want this addimage div work only my jquery files is loaded completely

use
if (jQuery) {
// jQuery is loaded
} else {
// jQuery is not loaded
}