How to add version number to JS file (because it loading old data in web from js file)

Question

JS example:

<script src="{{ url_for('static', filename='scripts/openchat.js') }}"></script>

I've noticed that when i inspect source in web browser i see some of website like this myscript.js?er2dfsdsfsdf44455230099 my file structure

i did lots of google, but i can't found any proper answer. can anyone help on this.

your_file.js? answer: https://stackoverflow.com/questions/32414/how-can-i-force-clients-to-refresh-javascript-files — Roman Epifanov, Jun 23 '20 at 19:01
Does this answer your question? [How can I force clients to refresh JavaScript files?](https://stackoverflow.com/questions/32414/how-can-i-force-clients-to-refresh-javascript-files) — noslenkwah, Jun 23 '20 at 19:49

score 0 · Answer 1 · answered Jun 23 '20 at 19:03

0

I think creating the scripts tag dynamically could help you. Please try this

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const filenames = ["myscript.js", "myotherscript.js"];
    const body = document.body;

    for (const filename of filenames) {
      const script = document.createElement("script");

      script.src = `${filename}?${Date.now()}`;
      script.type = "javascript";

      body.appendChild(script);
    }
  });
</script>

answered Jun 23 '20 at 19:03

Mario

4,784
3
34
50

i try your code it not showing anything in console and not loading – Ankit Singh Jun 24 '20 at 21:36
For this script to go into the context of your question you need to test it in an html document. How have you tried it? – Mario Jun 24 '20 at 23:19
Are you sure this code works because is not showing anything – Ankit Singh Jun 25 '20 at 04:04
it should not show anything, inspect the dom, it should have added just before closing the body tag a script tag for each script in the filenames array plus the timestamp that would make your script have a different src every time you visit the page – Mario Jun 25 '20 at 04:15
I added there only but it not taking JS files into the load – Ankit Singh Jun 25 '20 at 04:16
It is only an example, it should not load anything, it just shows how you can add a number in this case the timestamp to the file name, the way I propose is to create the script tags programmatically, this way I think you will avoid the problem you describe in your question – Mario Jun 25 '20 at 04:21

score 0 · Answer 2 · answered Jun 23 '20 at 19:03

0

I think maybe you just need to hard reload your web browser. Search on the internet how to hard reload you're web browser. Because I don't know your browser I can't tell you right now.

answered Jun 23 '20 at 19:03

aparep7474

79
7

yes hard rest is working but i but to implement in code so i don't have to do hard reset every time – Ankit Singh Jun 24 '20 at 21:38
"ctrl +F5 " for hard reset for PC but what will happen when i am on mobile device? – Ankit Singh Jun 24 '20 at 21:39
I think you can do inspect element in mobile device and hard reload from there – aparep7474 Jun 24 '20 at 21:42
but if someone else using my website so i can't tell them to do hard reset on your web browser. – Ankit Singh Jun 24 '20 at 21:44
Well you can't but nobody should be using your website if its in dev mode. If they are trying to debug you can somehow contact them. – aparep7474 Jun 24 '20 at 21:48
You can always push it to GitHub and run your code from there too – aparep7474 Jun 24 '20 at 21:50
yeah correct but i have to show them using Heroku so i have to deploy on Heroku – Ankit Singh Jun 24 '20 at 21:52
i have using PostgreSQL and other add-on in Heroku so now i can't do changes in deploy server – Ankit Singh Jun 24 '20 at 21:55
If you are showing someone then just run a hard reset, and the first time they open the code they will have the latest version – aparep7474 Jun 24 '20 at 21:56
yeah i agree with that but it is a temp. solution but i want know about JS versioning system that many people are using . – Ankit Singh Jun 24 '20 at 22:00
Ok let me look into it – aparep7474 Jun 24 '20 at 22:01
https://stackoverflow.com/questions/32414/how-can-i-force-clients-to-refresh-javascript-files I think maybe this can help you – aparep7474 Jun 24 '20 at 23:18

score 0 · Accepted Answer · answered Jun 25 '20 at 05:12

because of i am using flask url_for method to call JS files, so i found a manual solution for adding version in my JS or CSS files. I found this

<script src="{{ url_for('static', filename='scripts/openchat.js' , v='14') }}"></script>

but i want to find automate method for this thank you for support.

How to add version number to JS file (because it loading old data in web from js file)

3 Answers3