Cannot call function from dynamically loaded javascript file

Question

I'm loading a javascript external file from another javascript file present in the document and since its loaded, I want to call a function from the loaded js file. Here is the load function:

function loadScript(url) {
    var head = window.top.document.getElementsByTagName('head')[0];
    var script = window.top.document.createElement('script');
    script.src = url;
    script.type= "text/javascript";
    head.appendChild(script);
    if(script.readyState) {  //IE
        script.onreadystatechange = function() {
            if ( script.readyState === "loaded" || script.readyState === "complete" ) {
                script.onreadystatechange = null;
                console.log("[BANDEAU] script loaded");
                testAlert();
            }
        };
    } else {  //Others
        script.onload = function() {
            console.log("[BANDEAU] script loaded");
            testAlert();
        };
    }
}

So it works nice because the javascript file is succesfuly loaded but I cannot access the testAlert() method from the loaded javascript file, as I try in the code above, right after printing that the script is loaded. When I try to get the type of the function with typeOf on window[testAlert], I get an undefined. But when I try to execute the testAlert() method in the developer console, it works perfectly. Does anyone see what I'm doing wrong ?

Does the position in the DOM between the caller javascript file and the loaded javascript file might be the reason ?

Why are you appending the script to window.top instead of window? — Pointy
– Pointy, Commented Dec 15, 2016 at 15:40
To put it another way: when that code runs, is window the same as window.top or not? If they're different, then that's your problem. — Pointy
– Pointy, Commented Dec 15, 2016 at 16:27

mplungjan · Accepted Answer · 2016-12-15 16:38:47Z

2

You need to assign the load handlers BEFORE changing the src

function loadScript(url) {
  var head = document.getElementsByTagName('head')[0]; // window.top in frames/iFrames
  var script = document.createElement('script');
  script.type = "text/javascript";

  if (script.readyState) { //IE
    script.onreadystatechange = function() {
      if (script.readyState === "loaded" || script.readyState === "complete") {
        script.onreadystatechange = null;
        console.log("[BANDEAU] script loaded");
        testAlert(); // window.top.testAlert() if needed
      }
    };
  }
  else {
    script.onload = function() {
      console.log("[BANDEAU] script loaded");
      testAlert(); // window.top.testAlert() if needed
    };
  }
  script.src = url;
  head.appendChild(script);
}

edited Dec 15, 2016 at 16:38

answered Dec 15, 2016 at 15:40

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

3 Comments

Pointy Over a year ago

@HubertSolecki are you loading that file from an <iframe> or something?

Hubert Solecki Over a year ago

@Pointy yes... just noticed that.... Just needed to add parent keyword right before my testAlert function...

Pointy Over a year ago

@HubertSolecki right, window.parent.testAlert() or window.top.testAlert().

Community · Accepted Answer · 2017-05-23 12:24:53Z

1

In addition to what mplungjan said, I'm pretty sure you'd have to do an eval() on the loaded script in order to have a legitimate address for the call to testAlert().

Also, check out this link for more info.

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Dec 15, 2016 at 15:59

Dan Schaefer

113 bronze badges

4 Comments

Dan Schaefer Over a year ago

Keep in mind that eval() is dangerous, so I wouldn't recommend it as a long-term solution. The link I provided features more mature (and safer) solutions.

Pointy Over a year ago

This is untrue. The OP is creating a <script> tag and appending it to the document; the normal behavior of a <script> tag is that the browser loads the code and runs it.

Dan Schaefer Over a year ago

True. The parent does run the code, but the loadScript() function won't automatically receive a pointer to testAlert(). But I see your answer in the above comment, and that totally works; reference testAlert() with window.parent.testAlert(). That's a lot better than my idea of using eval().

Hubert Solecki Over a year ago

Thanks everyone for your answers. The problem was that I called the function within an iFrame, juts noticed that so I needed to call the function on the parent pointer.

Collectives™ on Stack Overflow

Cannot call function from dynamically loaded javascript file

2 Answers 2

3 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related