How to read javascript file in frontend javascript/browser

Question

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.

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
– Teemu, Commented Jan 3, 2023 at 7: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
– Teemu, Commented Jan 3, 2023 at 7:58
I rather not answer with a hack ; ). Like said, you should rather put effort on proper version management on your server. — Teemu
– Teemu, Commented Jan 3, 2023 at 8:04

jeremy-denis · Accepted Answer · 2023-01-03 09:38:31Z

1

an idea can be :

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

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);
});

edited Jan 3, 2023 at 9:38

answered Jan 3, 2023 at 8:00

jeremy-denis

6,8963 gold badges23 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aqeel Ashiq Over a year ago

But does it fetch fresh copy from the server, or makes use of browser cached copy?

jeremy-denis Over a year ago

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"}) hacks.mozilla.org/2016/03/…

Amin S · Accepted Answer · 2023-01-03 08:20:43Z

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.

answered Jan 3, 2023 at 8:20

Amin S

5923 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to read javascript file in frontend javascript/browser

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related