JavaScript - cannot find imported file-CodePudding

I'm trying to create a JavaScript worker, where I require the JSONfn library. I'm not entirely sure how to import it?

<html>
    <script type="text/javascript" src="jsonfn.js"></script>

    <script id="worker" type="javascript/worker">
        self.onmessage = function f(message){
              console.log(JSONfn.parse(message...)
        }
    ...
    </script>
<html>

I get the following error:

Uncaught ReferenceError: JSONfn is not defined

CodePudding user response：

To import external scripts in your Web Worker, you can use the importScripts() method available in non-module Worker contexts.

However, this particular library doesn't seem to be meant for use in a Worker (it calls the window getter, which isn't available in Worker contexts). It seems that simply redirecting window to self does the trick, but it may very well fail in other places.

Also, to parse back from the main thread you'll obviously have to load the library again in that context (through a <script>).

const worker_url = URL.createObjectURL(new Blob([document.querySelector("[type=worker]").textContent], {type: "text/javascript"}));
const worker = new Worker(worker_url);
worker.onmessage = (evt) => {
  console.log("received", evt.data);
  const parsed = JSONfn.parse(evt.data);
  console.log(parsed)
  console.log(parsed.baz());
};

<script type="worker">
window = self; // jsonfn uses "window"
importScripts("https://cdn.jsdelivr.net/gh/vkiryukhin/jsonfn/jsonfn.js");
const obj = {foo: "bar", baz: function() { return "blah"; }}
const json = JSONfn.stringify(obj);
postMessage(json);
</script>
<!-- to parse from the main thread we need to load the library here too -->
<script src="https://cdn.jsdelivr.net/gh/vkiryukhin/jsonfn/jsonfn.js"></script>

Also beware that this library requires that you do declare your function with the function keyword (arrow functions or method syntax aren't supported), and that it won't be able to retrieve anything outside of the scope of the function, it really just does copy the source code, nothing about the context.

CodePudding user response：

You should use a CDN like UNPKG to import your scripts, or host them locally in your website directory.

CDN Usage

<script src="https://unpkg.com/json-fn" type="text/javascript"></script>

Local hosting

Download the jsonfn.js from the github and place it in the directory in which you are hosting your website on.

<script src="jsonfn.js" type="text/javascript">