Javascript: Create Script does not work

Question

I'm wiriting on a Chrome Extension. I need too check if a URL is online or not. The URL returns me a variable, so if the var is true, the URL is online.

In case the URL is offline it takes about 2 seconds for the error, so the Extension popup needs 2 seconds to start EVERYtime.

This is my "old" version:

popup.html:

<script language="javascript" src="http://example.org/jdcheck.js"></script>
<script language="javascript" src="popup.js"></script>

popup.js:

if (variable) { [...] }

Well, that worked - after 2 seconds.

Now I had an idea, so I removed the scriptlink in the popup.html. And that's my new popup.js:

background.$(document).ready(function() {


      var jq = document.createElement('script'); jq.type = 'text/javascript';
      jq.src = 'http://127.0.0.1:9666/jdcheck.js';
      document.getElementsByTagName('head')[0].appendChild(jq);

  if(jdownloader){
         [...action]
  }  
});

You see, I use jQuery to load the Checkfile.

Now, it throws me an error:

Uncaught ReferenceError: jdownloader is not defined

Well, it looks like the createElement did not work. I'm 100% sure that the URL gives me the variable I want.

Could you please help me? I don't know how to solve this..

Thank you! Markus

edit: I removed the jQuery part, added the keepGoing and the jq.onload:

    function keepGoing() {

      console.log("JS should have been loaded");

      if(jdownloader){

        [action]
      }  
    }  

      var jq = document.createElement('script');
      jq.onload = keepGoing();
      jq.src = 'http://127.0.0.1:9666/jdcheck.js';
      document.getElementsByTagName('head')[0].appendChild(jq);

NOW, the console gives me this:

JS should have been loaded popup.js:98
Uncaught ReferenceError: jdownloader is not defined popup.js:100

So it seems like the jdownloader var is not passed to the popup.js. Why..why?! I don't know.

Markus

You need to wait for the external script to load before you access variables/function from it. Use jq.onload = function() {// script has been loaded, jdownloader should be there} — devnull69
– devnull69, Commented Oct 4, 2013 at 11:26
What is "jdownloader"? It's not defined as var (at least in your snippet)? And what is "background"? — mrak
– mrak, Commented Oct 4, 2013 at 11:27
@mrak: Fairly sure jdownloader is created by the script being loaded... — T.J. Crowder
– T.J. Crowder, Commented Oct 4, 2013 at 11:31
@mrak, the background variable contains the background.js, a command from the Google Chrome Extensions API — Standard
– Standard, Commented Oct 4, 2013 at 11:39

T.J. Crowder · Accepted Answer · 2013-10-04 11:26:42Z

2

When you append a script tag to the DOM, the code does not wait for the browser to download and evaluate the script before continuing.

So you have to check back. In Chrome, you can use the load event on the script element.

background.$(document).ready(function() {

    var jq = document.createElement('script'); jq.type = 'text/javascript';
    jq.onload = keepGoing; // Or an anonymous inline function if you prefer
    jq.src = 'http://127.0.0.1:9666/jdcheck.js';
    document.getElementsByTagName('head')[0].appendChild(jq);

    function keepGoing() {
        if(jdownloader)...
    }  
});

("On Chrome" because in older versions of IE, script didn't fire the load event, it fired readystatechange.)

Side note: You don't have to supply the type attribute if it's text/javascript. That is, and always has been, the default.

answered Oct 4, 2013 at 11:26

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

6 Comments

Standard Over a year ago

Do I call a function with jq.onload? Also I could remove the jQuery part here, though the keepGoing should not load until the js file is loaded. That's right? Cause if I try it, it still gives me the error.

T.J. Crowder Over a year ago

@wernersbacher: jq.onload sets up a function that will get called when the script is loaded.

Standard Over a year ago

I edited the main post, if you got time, just take a look - that would be nice. Thanks!

T.J. Crowder Over a year ago

@wernersbacher: Please look at the answer again. Not jq.onload = keepGoing();, jq.onload = keepGoing; (no () at the end). You don't want to call the function and assign its return value to jq.onload, you want to assign the function to jq.onload (functions are first-class objects in JavaScript).

Standard Over a year ago

It works now, thank you But it still loads ca. 2 seconds, even if I add jq.async = true; or use the jQuery .ready(). Is this a javascript problem or a Google Chrome problem? I could try to put this in the background.js, which is running all over the time and set an interval for it...still thank you very much!

|

mrak · Accepted Answer · 2013-10-04 12:17:00Z

0

The solution may be quite simple, at least for the edited part of your question. See my jsfiddle for reference: http://jsfiddle.net/6kkC4/1/

jq.onload = keepGoing(); vs. jq.onload = keepGoing;

Calling "onLoad()" will evaluate the function immediately (so not onload). With jq.onload = keepGoing; only a reference to the function is passed and the function is evaluated onload.

answered Oct 4, 2013 at 12:17

mrak

2,92623 silver badges23 bronze badges

1 Comment

Standard Over a year ago

Yeah, it works now with that, T.J. Crowder told me this also in his comment - but tough thank your for your effort. Markus

David Spector · Accepted Answer · 2021-06-06 12:19:42Z

Since the "creating a script node" method for doing a JavaScript file Include is asynchronous, we should be using the await and async keywords.

Here is a complete example of how to Include a function called "Context" and then to call it, using Promises (await and async):

CallContext(); // Call the async function to do the call

async function CallContext()
    {
    await Include("context.js");
    alert(Context()); // Call Context when Include is done
    } // CallContext

// Wrap the callback of the script element creation in a Promise
async function Include(jsFilePath)
    {
    return new Promise((resolve,reject) =>
        {
        var js = d.createElement("script");
        js.onload = resolve;
        js.src = jsFilePath;
        d.body.appendChild(js);
        });
    } // Include

Note that, as yet, there is no modern way to hide the explicit "new Promise" code.

Collectives™ on Stack Overflow

Javascript: Create Script does not work

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related