Delay the firing of the 'onload' event

Question

I have an API that a number of my clients use, using my own specifications and instructions for manipulating it from their own sites. It means that, unfortunately for me, changing the HTML code on their side is not an option. This is the general idea how their code looks and I need to make it still work after I do the changes I want:

<script src="player.js"></script>
<script>
    console.log(player.someProperty);
</script>

I want to do the following changes:

rename player.js to player_2.0.js
create a small script which will be named player.js so the HTML5 at the top would work like it did before. Then player.js would load player_2.0.js dynamically.

The problem is when the following part of the code gets to be exectuded

<script>
    console.log(player.someProperty);
</script>

player_2.0.js still isn't done loading, resulting player.someProperty to be undefined.

So my question is if I can manipulate or postpone the 'onload' event for player.js script until it's done loading player_2.0.js, or do anything that could get me accomplish that.

if player.js load player_2.0.js dynamically, you need to load that script that use player.someProperty dynamically loaded by player.js too. — YOU, Oct 07 '15 at 12:59
That's not triggered after `onload`. It's triggered as the browser parses the `script` tag. — MinusFour, Oct 07 '15 at 12:59
do you have `.htaccess` control? if yes `Redirect 301 player.js player2.0.js` this code might do the trick! — Vicky Gonsalves, Oct 07 '15 at 13:03
then you have to periodically check player object is available, like every 50ms. I don't think there is way to do that if player.js is not under your control. — YOU, Oct 07 '15 at 13:06
@YOU, player.js is under my control. The HTML code is not. So MinusFour is right, the code in the script tag where the wanted "someProperty" is being looked for is executed right after loading player.js and before loading player_2.0.js. — arhonthhh, Oct 07 '15 at 13:13
How are you dynamically loading `player_2.0.js`? @halfzebra's answer should work for you. — Buzinas, Oct 07 '15 at 13:30

score 2 · Accepted Answer · edited May 23 '17 at 11:52

You're loading player_2.0.js asynchronously, therefore the code below is unable to access player.someProperty.

There is an old and ugly technique for synchronous loading, which uses Document.write()

In short:

<script type="text/javascript">
  document.write('<script type="text/javascript" src="other.js"></script>');
</script>

<script type="text/javascript">
  functionFromOther();
</script>

See document.createElement(“script”) synchronously for more details.

This is a very bad thing to do, since you will block the loading of other resources, and you can not inject this script dynamically without iframes.

I would rather use a technique called Friendly Iframes, but that will require some changes in your public API.

It may be bad most of the time, but in my case it's just what I needed. Thanks. — arhonthhh, Oct 07 '15 at 14:14

Delay the firing of the 'onload' event

1 Answers1