IE11 compatibility issues with script.onreadystatechange

[Anthony Consolati]

Hi all

We have been using jsclass for several versions of IE without any problem.  Recently though I have noticed problems with our pages on Server2012 R2 (which comes with IE11).  Pages using js.class appear to hang and never finsih loading.

On close examination the problem seems to be with loader-browser.js and the manner in which it is checking for script loading:

    script.onload = script.onreadystatechange = function() {
      var state = script.readyState, status = script.status;
      if ( !state || state === 'loaded' || state === 'complete' ||
           (state === 4 && status === 200) ) {
        fireCallbacks();
        script.onload = script.onreadystatechange = self._K;
        head   = null;
        script = null;
      }
    };
    head.appendChild(script);

In my testing the function connected to the onload method never runs, and thus fireCallbacks() never executes.

I have seen some information relating to changes in IE11 and scripts.onreadystatechange no longer being available:

http://msdn.microsoft.com/en-us/library/ie/bg182625%28v=vs.85%29.aspx

Is this something that needs to be updated in js.class to work, or am I on the completely wrong track here?  Any feedback appreciated.

Thanks
Anthony

[James Coglan]

On 23 October 2013 03:12, Anthony Consolati <acons...@gmail.com> wrote:

I have seen some information relating to changes in IE11 and scripts.onreadystatechange no longer being available:

http://msdn.microsoft.com/en-us/library/ie/bg182625%28v=vs.85%29.aspx

That page says script.onreadystatechange has been replaced with script.onload, which suggests this code should still work since it binds to both these events. Does the function not fire at all? If it does fire, what are script.status and script.readyState? 

[Anthony Consolati]

Hi James

The function does not fire at all.  I've set a breakpoint on the following line:

var state = script.readyState ...

and it never gets hit, whereas it does on IE10.  The IE10 stacktrace just tells me the call is coming from the onreadystatechange browser event.

Since this does not fire on IE11 then this causes exports.require to hang, since Package.when inside that never executes the callback.

Is there any other info I can pass on to help debug?  Has anyone else reading this list been successful using JS.require on IE11?

Many thanks for your help

[Anthony Consolati]

OK, I've *finally* worked this out. It is likely something that should be addressed in the loader-browser.js file.

The problem I have is that the .src that my script file was set to is incorrect.  That is why the script never loaded, and the onload binding never fired.

The reason the path became wrong in IE11 is due to this function:

__FILE__: function() {

    var scripts = document.getElementsByTagName('script'),

        src     = scripts[scripts.length - 1].src,

        url     = window.location.href;

    ...

  },

The src variable is initialised with a different path in IE11 because an extra script gets loaded before this function executes.  This extra script is in a different location from js.class, and so then js.class/core.js cannot be loaded.

I added this into the function below the previous snippet:

    for (var i = 0; i < scripts.length; i++) {

        if (scripts[i].src.indexOf('js.class') != -1) {

            src = scripts[i].src;

            break;

        }    

    }

I'm sure there is a more efficient way to do this as I'm not proficient in JS, but it does the job and resolves my issue.

Would be good to have this addressed natively so we don't lose our fix in a future js.class update.

Many thanks for your time

On Wednesday, 23 October 2013 12:05:53 UTC+10, James Coglan wrote:

[James Coglan]

On 23 October 2013 07:59, Anthony Consolati <acons...@gmail.com> wrote:

The reason the path became wrong in IE11 is due to this function:

__FILE__: function() {

    var scripts = document.getElementsByTagName('script'),

        src     = scripts[scripts.length - 1].src,

        url     = window.location.href;

    ...

  },

This function should not be used in the browser; if it is then that means jsclass has not managed to detect the path that it's being served from. Try adding this before loading any files:

JSCLASS_PATH = 'http://example.com/path/to/jsclass'