4

Please read carefully before marking as dupe.

I want to read a javascript file on frontend. The javascript file is obviously being used as a script on the webpage. I want to read that javascript file as text, and verify if correct version of it is being loaded in the browser. From different chunks of text in the js file, I can identify what version is actually being used in the end user's browser. The js file is main.js which is generated by angular build.

I know we can do something like creating a global variable for version or some mature version management. But currently, on production site, that will mean a new release, which is couple of months from now. Only option I have right now is html/js page, which can be directly served from production site, without waiting for new release.

So my question is, is it possible we can read a javascript file as text in hmtl/js code in the browser.

Aqeel Ashiq
  • 1,988
  • 5
  • 24
  • 57
  • What is your question? – Daniel Jan 03 '23 at 07:49
  • this will help you https://stackoverflow.com/questions/27430557/how-to-make-sure-browsers-load-the-most-recent-version-of-a-file-after-updating – WiatroBosy Jan 03 '23 at 07:51
  • Load the script into tag with type of non-HTML5 script type, ex. `type="text/plain"`. That way the script not executed, and you can get the text content to verify the version. Then you can create a new script element dynamically (with correct version details in `src`) and load the script. – Teemu Jan 03 '23 at 07:51
  • I'd suggest you to use a proper version management system on your server, though, checking the version at the client feels a bit hackish. – Teemu Jan 03 '23 at 07:58
  • @Daniel I want to read the js file as text, and from different components in that js file I will be able to detect the version of js file being loaded on frontend. Just want to make sure if correct version is beingloaded – Aqeel Ashiq Jan 03 '23 at 08:01
  • @Teemu thanks for suggestion. May you please put that as an answer? – Aqeel Ashiq Jan 03 '23 at 08:02
  • 1
    I rather not answer with a hack ; ). Like said, you should rather put effort on proper version management on your server. – Teemu Jan 03 '23 at 08:04

2 Answers2

1

an idea can be :

  1. use fetch api to get a container that can be use to async load the script https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

  2. use text() method which return a promise to get text content

    fetch('http://localhost:8100/scripts.js').then((res) => res.text()).then(scriptContent => {
  // scriptContent contain the content of your script
  // if (scriptContent.includes('version : 1.1.1')
  console.log(scriptContent);
});
jeremy-denis
  • 6,368
  • 3
  • 18
  • 35
  • But does it fetch fresh copy from the server, or makes use of browser cached copy? – Aqeel Ashiq Jan 11 '23 at 12:42
  • 1
    by default yes you have cache. But you can pass a second argument to fetch to force not have cache `fetch("some.json", {cache: "no-store"})` https://hacks.mozilla.org/2016/03/referrer-and-cache-control-apis-for-fetch/ – jeremy-denis Jan 11 '23 at 14:44
1

this is absolutely not an efficient way, but since you want to work without any new version release or working with a version management system

here is the thing assume file's checksum (md5 sha125 or anything) of V1.0 equals X and you will calculate before the coding part.

if checksum(X) != X{
location.reload() 
}

would help for a security features too since it's an important project.

another way of controlling this situation is changing the main.js file's name if it is possible.

Amin S
  • 546
  • 1
  • 14