Microsoft Edge easyXDM on event ("message") not triggered

Question

On Microsoft Edge, the GET request is not running. I walked through the code to the start point of the AJAX request being executed and set a breakpoint in the callback (s). However, the code never reaches callbacks.

I already have .then () and .fail () settings with callbacks and tried to add .done () and .always () with callbacks, but none of the code in the callbacks works.

Then I checked the network tab in dev-tools and I can not find the request at all. It seems that for some reason, Edge is not dismissing the request.

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 the request function call 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 execute this 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 corsa material. (I don't know much 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

The problem seems to be easyXDM . waitForReady() does not fire on(window, "message", waitForReady) at the edge. I am studying the problem now.

easyXDM fragment:

  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 starts, but the waitForReady method waitForReady never called. The only browser he did not call to is Edge (works in IE8 +, Chrome, Safari, FF and mobile chrome / safari).

Answer 1

It turns out there was a required “hack” that the previous developer wrote in our easyXDM implementation.

In our easyXDM implementation, we had to update the Window object in IE because our application runs in iFrame. Since Edge is technically not a version of IE, our test failed, so the code did not execute to update Window to be window.parent in the context of easyXDM.

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

This solved the problem.