Microsoft Edge easyXDM on("message") event not being called

Question

In Microsoft Edge, a GET request is not running. I have stepped through the code to the point of the AJAX request being run, and set a breakpoint in the callback(s). However, the code never reaches the callbacks.

I already have a .then() and .fail() setup with callbacks, and tried adding a .done() and .always() with callbacks, but none of the code in the callbacks is running.

I then checked the network tab in dev-tools, and I cannot find the request at all. It seems as though Edge is not firing the request off for some reason.

request = function(options, resolveScope) {
    var deferred = $.Deferred();
    corsHandler.makeRequest(options)
        .done(this._wrap(function(response) {
            deferred.resolveWith(resolveScope, [response]); //never gets here
        }, this))
        .fail(this._wrap(function(response) {
            deferred.rejectWith(resolveScope, [response]); //never gets here
        }, this));
    return deferred;
}

This is what calls the request function above.

ajaxFunc = function(data, scope) {
    return request({
        url: '/path/to/server',
        internalUrl: true,
        method: 'GET',
        datatype: 'json',
        data: data
    }, scope);
}

This is the implementation used to make that request.

(function() {
    // set data var
    return ajaxFunc(data, self)
        .then(function(res) { console.log(res); }) //never gets here
        .done(function(res) { console.log(res); }) //never gets here
        .fail(function(res) { console.log(res); }) //never gets here
        .finally(function(res) { console.log(res); }) //never gets here
 })();

Here is the cors stuff. (I don't know a whole lot about this.)

 corsHandler.makeRequest = function(options) {
        // resolve default options
        _.defaults(options, {
            xhr:        null,
            corsUrl:    null,
            url:        null,
            method:     'GET',
            data:       {},
            success:    function() {},
            error:      function() {},
            terminate:  false,
            binary:     false,
            headers:    {},
            internalUrl: false,
            datatype: ''
        });
        // if url is internal, create absolute url from relative url
        if (options.internalUrl) {
            options.url = this.createAbsoluteInternalUrl(options.url);
        }

        // resolve cors url or proxy url
        options.corsUrl = options.corsUrl || this.getCorsUrl(options.url);
        if (!options.corsUrl) {
            options.url     = this.getProxyUrl(options.url);
            options.corsUrl = this.getCorsUrl(options.url);
        }

        // create xhr
        if (!options.xhr && options.corsUrl) {
            options.xhr = this.createXhr(options.corsUrl);
        }

        // create cleanup procedure
        var cleanUpAfterRequest = $.proxy(function() {
            if (options.terminate) {
                options.xhr.destroy();
                this._removeCacheXhr(options.corsUrl);
            }
        }, this);

        // prepare deffered object
        var deferred = $.Deferred();
        deferred
            .done(function() {
                if (options.success) {
                   options.success.apply(null, Array.prototype.slice.call(arguments));
                }
            })
            .fail(function() {
                if (options.error) {
                    options.error.apply(null, Array.prototype.slice.call(arguments));
                }
            });

        // make actual request
        if (!options.xhr) {
            throw 'corsHandler: xhr object was not created or defined to make request'; 
            // this does not happen
        }
        options.xhr.request(
            {
                url:    options.url,
                method: options.method,
                data:   options.data,
                binary: options.binary,
                headers: options.headers,
                datatype: options.datatype
            },
            function() {
                deferred.resolve.apply(null, Array.prototype.slice.call(arguments));
                cleanUpAfterRequest();
            },
            function() {
                deferred.reject.apply(null, Array.prototype.slice.call(arguments));
                cleanUpAfterRequest();
            }
        );
        return deferred;
    }

UPDATE

It looks like the issue is in easyXDM. waitForReady() is not firing on(window, "message", waitForReady) in edge. I'm looking into the issue more now.

easyXDM snippet:

    targetOrigin = getLocation(config.remote);
    if (config.isHost) {
        // add the event handler for listening
        var waitForReady = function(event){
            if (event.data == config.channel + "-ready") {
                // replace the eventlistener
                callerWindow = ("postMessage" in frame.contentWindow) ? frame.contentWindow : frame.contentWindow.document;
                un(window, "message", waitForReady);
                on(window, "message", _window_onMessage);
                setTimeout(function(){
                    pub.up.callback(true);
                }, 0);
            }
        };
        on(window, "message", waitForReady);

        // set up the iframe
        apply(config.props, {
            src: appendQueryParameters(config.remote, {
                xdm_e: getLocation(location.href),
                xdm_c: config.channel,
                xdm_p: 1 // 1 = PostMessage
            }),
            name: IFRAME_PREFIX + config.channel + "_provider"
        });
        frame = createFrame(config);
    }

The above snippet runs, but the waitForReady method is never called. The only browser it's not called in is Edge (Works in IE8+, Chrome, Safari, FF, and mobile chrome/safari).

Answer 1

It turns out there was a required "hack" that a previous developer wrote into our implementation of easyXDM.

In our implementation of easyXDM, we had to update the Window object on IE because our app launches in an iFrame. As Edge isn't technically a version of IE, our test was failing, so the code was not running to update window to be window.parent in the context of easyXDM.

We are using typeof document.documentMode === 'number' to detect IE, but document.documentMode is undefined in Edge, so we added a navigator.userAgent check for Edge.

This resolved the issue.