1

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.

ThaNoob
  • 520
  • 7
  • 23
  • 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;`. – JM-AGMS Apr 22 '21 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 Apr 23 '21 at 09: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();` – JM-AGMS Apr 23 '21 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 Apr 23 '21 at 16:53
  • 1
    Make sure the script is loaded correctly. Here's an example of it working: https://jsfiddle.net/ptLjezrv/ – JM-AGMS Apr 23 '21 at 17:46
  • Thanks @JM-AGMS this does work. If you post this comment as an answer I will accept it, otherwise I can delete the question all together. Allthough I think it might help other people in the future. – ThaNoob Apr 26 '21 at 07:47
  • PS: any idea why this didn't work? https://jsfiddle.net/AspyroCoder/tk6ogwfe/ – ThaNoob Apr 26 '21 at 07:53

1 Answers1

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();
};
JM-AGMS
  • 1,670
  • 1
  • 15
  • 33