JavaScript insert script with async and use functions from it? [duplicate]

Question

I have written a small widget which I include onto pages like this:

<script type="text/javascript">
var _sid = '1';
  (function() {
    var se = document.createElement('script'); se.type = 'text/javascript'; se.async = true;
    se.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://') + 'dev.domain.com/widget/hello.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(se, s);
  })();  
</script>

Now I want to find a way to call functions that exist within hello.js, which currently looks like this:

var widget = function () {

    function setName(a) {
        console.log(a);
    }

    return widget;  
}();

So I want to be able to make a call to setName like so: widget.setName("Andy")

...from the embed page, but for some reason I get "widget is undefined."

Any ideas what I am doing wrong?

Alosyius does this relate in any way to jquery - don't just approve edit's but take a closer look and reject them if they don't make any sense! BtT: since you load your script asynchronous, you have to check first, if it has already finished loading. — Christoph
– Christoph, Commented Aug 20, 2013 at 7:48
You don't attach a load event handler to the script. When the load event handler runs, the script is fully available and you can call the functions defined in the script. — Felix Kling
– Felix Kling, Commented Aug 20, 2013 at 7:53
You'll have to change the embed code, it's the only way to guarantee that the module has completed loading. — Alnitak
– Alnitak, Commented Aug 20, 2013 at 7:56

Michiel Dral · Accepted Answer · 2013-08-20 10:16:16Z

1

Before you use widget, you need to know it is loaded, there are multiple options for that:

Use requireJs or something like it.
Implement a callback function in the javascript you are loading, say it will fire 'document.onHelloIsLoaded', then if you want to know if hello is loaded, just set that variable to a function.
Make a loop, checking if the widget variable is set. setInterval (which cancels itself when widget is found and the code has executed)

you also need to make the setName variable accessible when you have access to widget, which it now isn't. You should put something like this:

var widget = {};
widget.setName = function()... 
return widget;

edited Aug 20, 2013 at 10:16

answered Aug 20, 2013 at 7:56

Michiel Dral

4,1351 gold badge23 silver badges22 bronze badges

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

12 Comments

Alosyius Over a year ago

How would i implement a callback function? That sounds like the best option

Christoph Over a year ago

option 3 is probably not a good idea. Use onload or in IE readystatechange and pass a callback handler.

Felix Kling Over a year ago

"You can use while [...]" No you can't. That would block the browser since JavaScript is single-threaded.

Michiel Dral Over a year ago

@Felix I know it would block, but you CAN. It is not async anymore and that is why I put it in option 3,and not option 1. (I also think that is a really bad idea, but I was just giving all possible solutions I know)

Felix Kling Over a year ago

How would the code look like? while(!window.widget){} and wait until the loaded code runs to set window.widget? As I said, this won't work because the code of the loaded would never run since the browser is blocked by the while loop. It shouldn't be in the list of solutions at all because it is not a solution.

|

Collectives™ on Stack Overflow

JavaScript insert script with async and use functions from it? [duplicate]

1 Answer 1

12 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Linked

Related