测试IE8兼容性问题

Question

TL;DR: How can I test for compatibility issues with IE8 on my site?

I wrote up a website for school, and it works on every browser I've tested, except for <=IE8.

What happens and what I've tried:

• The site starts to load, then stops, and shows only a blank screen.
• I figured I was using a method that it doesn't recognize, so I opened the console and refreshed. It gives 0 errors or warnings in the console.
• I started the built-in debugger and placed breakpoints at major loading points within the script that handles loading the site. Stepping through the code, everything goes as expected, but still only a blank page is shown.

To test, I'm using IE11's emulation mode, but I experienced the same behavior in a real IE8 browser.

I'm using jQuery 1.11, which supports old versions of IE.

I can't really supply code, since there's a lot of it, but I'm passing off anything with sketchy browser support to jQuery, (verified with www.caniuse.com) and again, I'm not receiving any errors indicating that a certain method couldn't be found.

From this description, does anyone know what might be going wrong, or how else I could go about diagnosing the problem?

Update:

I thought everything was peachy while debugging, but I guess that will teach me to debug while at work.

I narrowed it down to the following piece of code:

Resolvable: function() {
    var isResolved = false;
    var onResolve;

    this.resolve = function() {
        isResolved = true;

        if (typeof onResolve !== 'undefined') {
            onResolve();
        }
    };

    this.setOnResolve = function(f) {
        if (isResolved) {
            f();

        } else {
            onResolve = f;
        }
    }

Inside setOnResolve , the else block is entered, the assignment happens, and everything stops loading (the "watch" panel empties out, and any manual watches I've added come up as "not available").

setOnResolve is called here:

/**
 * Runs each of the {@SuspendedLoader}s, in the order that they're given.
 *
 * @param {SuspendedLoader[]} seqOfSuspLoaders An array of {@link SuspendedLoader}s
 */
runLoadersInOrder: function(seqOfSuspLoaders) {
    if (seqOfSuspLoaders.length < 1) return;

    var currentLoader = seqOfSuspLoaders[0];
    var restLoaders = seqOfSuspLoaders.slice(1);

    var advance = Loaders.PageLoader.runLoadersInOrder;

    var loaderPromise = currentLoader.runLoader();

    if (loaderPromise instanceof Loaders.Helpers.Resolvable) {
        loaderPromise.setOnResolve(function() { //<--- HERE
            advance(restLoaders);
        });
    } else {
        loaderPromise.then(
            function() {
                advance(restLoaders);
            },
            function() {
                throw new Error("Couldn't run loader (" + currentLoader.constructor.name + "): ");
            }
        )
    }

},

I've placed breakpoints on every line of runLoadersInOrder however, and the code never advances past the call to setOnResolve . I step into setOnResolve , the onResolve assignment happens, then it quits.

Further

I've realized that the issue is actually that runLoadersInOrder is being exited completely instead of recursing. I'll keep playing with it.

Answer 1

I solved it. I'm passing off adding event handlers to jQuery wherever possible, but neglected to handle the case of the jQuery script tag onload event, which obviously never fires in old IE. This function was really the problem:

/**
 * Loads a script without using jQuery by inserting a script tag into the page.
 *
 * @param path The folder the scripts are in.
 * @param scriptName The name of the script to load.
 * @returns {Resolvable} A {@link Resolvable} indicating when the script tag is loaded.
 */
Loaders.ScriptLoader.loadJQuery = function(path, scriptName) {
    var firstExistingScript = document.body.getElementsByTagName('script')[0];

    var script = Loaders.ScriptLoader.createScript(path, scriptName);
    document.body.insertBefore(script, firstExistingScript);

    var res = new Loaders.Helpers.Resolvable();
    script.onload = function() {
        $.ajaxSetup({cache: true});

        res.resolve();
    });

    return res;
};

Note how I'm using onload to check for completion, which isn't compatible with old versions of IE. I changed that part to:

Loaders.Helpers.attachOnLoad(script, function() {
    $.ajaxSetup({cache: true});

    res.resolve();
});

where attachOnLoad =

attachOnLoad: function(element, f) {
if (typeof element.onload === 'undefined') {
        element.onreadystatechange = function() {
            if (element.readyState === 'loaded') {
                f();
            }
        };

    } else {
        element.onload = f;
    }
},

For some reason, the ready state never becomes complete , but does become loaded . I'll need to do further testing to ensure it consistently loads.