How to import javascript library from url and store it in a variable?

Question

Background

I usually code in python and am used to import libraries as follows:

import numpy as np

and then access the library as:

a = np.array([1,2,3])

However in javascript I can't get things to work this way. I am able to import a library through a url as follows:

<script src="//cdn.shopify.com/s/files/1/0561/6726/8513/t/1/assets/hello.js?v=6940067293431132177" crossorigin="anonymous"></script>
say_hi(); //say_hi is defined in hello.js

This works, but it is very confusing. I now have a bunch of functions that I can access directly but this pollutes my namespace. On top of that it isn't very clear from which library the functions are coming.

Question

Is there a way to access my 'hello' library through usage of an URL as follows:

hello.say_hi();

If so how do you do it?

Research

I know that you can use the 'export' and 'import' functions as follows

import * as hello from './hello.js';

with in hello.js an export defined as:

export {say_hi};

However I need to import it from a URL and I don't know how this would work with a URL.

I also found the following post and thus tried:

<script src="//cdn.shopify.com/s/files/1/0561/6726/8513/t/1/assets/hello.js?v=17694146303704268990"></script>
const hello = window.hello;
hello.say_hi()

But in this case hello is undefined...

I also tried out this post (answer of Rahul Srivastava):

var hello = document.createElement('script');
hello.setAttribute('src','//cdn.shopify.com/s/files/1/0561/6726/8513/t/1/assets/hello.js?v=17694146303704268990');
document.head.appendChild(hello);
hello.say_hi();

But then again hello.say_hi() is not recognized.

If this question is already answered elsewhere please do refer me, I can't find it.

Your last snippet of code does work. say_hi is not defined in your script. klotezooi is defined however. You can then do, window.test = klotezooi;. — user6702203
– user6702203, Commented Apr 22, 2021 at 18:44
Sorry you're correct I took an old hello.js file. The correct one is in the post now. The last code snippet still doesn't work (hello.say_hi() is not a function). I also just tried say_hi() but that also didn't work and anyway it wasn't what I wanted. — ThaNoob
– ThaNoob, Commented Apr 23, 2021 at 9:04
Instead of hello.say_hi(); in your last snippet, do var hello = {'say_hi':window.say_hi}; then you can do hello.say_hi(); — user6702203
– user6702203, Commented Apr 23, 2021 at 12:52
Still says the same: Uncaught TypeError: hello.say_hi is not a function. I tried it in shopify and on my local computer. FYI, just doing: window.say_hi(); also doesn't work. — ThaNoob
– ThaNoob, Commented Apr 23, 2021 at 16:53
Make sure the script is loaded correctly. Here's an example of it working: jsfiddle.net/ptLjezrv — user6702203
– user6702203, Commented Apr 23, 2021 at 17:46

user6702203 · Accepted Answer · 2021-04-26 13:36:21Z

1

Make sure the script is loaded correctly. If you attach a script with JavaScript in the page, you will have to wait until it loaded before trying to call functions in it.

https://jsfiddle.net/t3gkyxf4/

var script = document.createElement('script');
script.setAttribute('src','//cdn.shopify.com/s/files/1/0561/6726/8513/t/1/assets/hello.js?v=17694146303704268990');
document.head.appendChild(script);
// waits until the page is fully loaded before calling or copying functions
window.onload = function() {
  var test = {
    'say_hi': window.say_hi
  };
  test.say_hi();
};

answered Apr 26, 2021 at 13:36

user6702203

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

Collectives™ on Stack Overflow

How to import javascript library from url and store it in a variable?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related