0

I've three html files a.html,b.html & c.html

All of them call index.js.

Inside index.js, I'm importing a variable from a.js,b.js & c.js. Based on which html file called index.js , I want to use the variable from the corresponding js file inside index.js.

pic

It's not possible for me to remove index.js as it contains logic, which is needed for some other tasks.

Some more clarification:

index.js


if calling_html == a.html:
   import {variable} from a.js
else if calling_html == b.html:
   import {variable} from b.js
else 
   import {variable} from c.js

How to find calling_html?

Ken Adams
  • 83
  • 2
  • 9
  • Could you give some more details and/or a code snippet? I appreciate the diagram but it's really hard to understand concretely what your problem really is. – IndevSmiles Mar 17 '22 at 02:55
  • or you could import a.js as well on a.html before index.js that way you could access whatever variables or what not you needed from a.js and the same for b.js and c.js.... just a thought. – SharpInnovativeTechnologies Mar 17 '22 at 04:13

2 Answers2

3

I'd suggest looking at this post : How to pass parameters to a Script tag?

Basically you pass in a value in the script tag, which tells the index.js script which from which file you are loading it.

And then use

document.currentScript.getAttribute()

Edit : I find it less recommendable, but if you absolutely so wish, you can also use :

the

window.location

attribute

using window.location.href, or window.location.pathname

Alternatively, what is shown here :

https://www.sitepoint.com/get-url-parameters-with-javascript/

by doing something like

const urlParams = new URLSearchParams(window.location.search); const caller = urlParams.get('caller');

And load your a.html page with "[...]a.html?caller=a"

Now with all that said, I'm assuming that you don't want define a global constant with a header script tag in the page before using index.js as in

<head>
    //called before loading any other script
    <script>const caller='a.html';</script>
    // Rest of the header
</head>
// somewhere else
<script src="./index.js" />

and

<head>
    //called before loading any other script
    <script>const caller='b.html';</script>
    // Rest of the header
</head>
// somewhere else
<script src="./index.js" />
nextoptionnone
  • 172
  • 2
0
<script scr="./a.js" defer> // const a = 5 </script>
<script scr="./index.js" defer> // const myVariable = b || c || a </script>

Since you are defining your variables globally, you don't need to import them. You just need to make sure they are defined and parsed before your index.js file in HTML. After you do this, you can simply access those variable like this:

const myVariable = a || b || c;

For example, if you are on c page, a and b will be undefined because they simply not exist on that page then c will be your value.

webCatDev
  • 86
  • 5
  • the concept is good, if you clear up your answer I think people will definitely use this simply answer... The idea is you need to import a/b/c .js before index.js that way you can use the variable that these files set. – SharpInnovativeTechnologies Mar 17 '22 at 04:16