0

I have a javascript function which makes an external call to an API which in turn injects some HTML into my page.

Now i want to execute a function which checks this script and if it does not inject the HTML into my page i want to do something else here. The problem is i cannot call this function on document.ready nor window.load as the first script to the external API gets executed after these 2 events.

The script is something like below:

(function () {
    var o = ccs_cc_args; o.push(['_SKey', '35455c2f']); o.push(['_ZoneId', '311e740881']);
    var sc = document.createElement('script'); sc.type = 'text/javascript'; sc.async = true;
    sc.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'cdn.cnetcontent.com/jsc/h.js';
    var n = document.getElementsByTagName('script')[0]; n.parentNode.insertBefore(sc, n);
})();

Now the function I wrote is like below:

$(document).ready(function () {
 if ($("#ccs-inline-content").html() == "") {
          $('#ProductDetails > ul li:has(a[href="#tabs-1"])').hide()
           $("#ProductDetails").tabs('refresh');
            $("#ProductDetails").tabs('option', 'active', 1);
        }
    });

So i need to force the second function to run after the first script which does not happen.

Guy
  • 10,931
  • 5
  • 36
  • 47
MarsOne
  • 2,155
  • 5
  • 29
  • 53
  • 1
    That's too confusing to understand as it is. Please create a MCVE (Read [ask]) – Amit Jul 09 '15 at 11:16
  • Put both of them into the same $(document).ready(...) - and the upper one will run first. The accepted answer to this might help: http://stackoverflow.com/questions/1795438/load-and-execution-sequence-of-a-web-page – AndreasHassing Jul 09 '15 at 11:51

1 Answers1

1

According to the spec, after the executing a script, browsers must

  1. Fire a simple event named afterscriptexecute that bubbles (but is not cancelable) at the script element.

  2. If the script is from an external file, fire a simple event named load at the script element.

    Otherwise, the script is internal; queue a task to fire a simple event named load at the script element.

So you can add a load or afterscript event listener to the script element:

scriptElement.addEventListener('load', callback);

If you don't have a reference to the script element, you can use event delegation and add the event listener to an ancestor, e.g. document.

Note this will only work with afterscriptexecute, which bubbles, but not with load, which doesn't.

Also note the event listener may run for multiple script elements, so you may have to filter the desired one.

document.addEventListener('afterscriptexecute', function(e) {
  if(e.target.src === url)
    callback();
});

You can also use event delegation in the capture phase. Then both afterscriptexecute and load will work, and the chance that some other listener stops the propagation of the event (which would avoid the execution of the callback) will be lower.

document.addEventListener('load', function(e) {
  if(e.target.tagName.toLowerCase() == 'script' && e.target.src === url)
    callback();
}, true);
Oriol
  • 274,082
  • 63
  • 437
  • 513