javascript - ("message"上的 Microsoft Edge easyXDM)事件未被调用

Question

在 Microsoft Edge 中，GET 请求未运行。我已逐步执行代码直至运行 AJAX 请求，并在回调中设置断点。但是，代码永远不会到达回调。

我已经有一个带有回调的 .then() 和 .fail() 设置，并尝试添加一个带有回调的 .done() 和 .always()，但是回调中的代码都没有运行。

然后我检查了开发工具中的网络选项卡，但我根本找不到请求。似乎 Edge 出于某种原因没有触发请求。

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;
}

这就是调用上面的请求函数。

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

这是用于发出该请求的实现。

(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
 })();

这是 cors 的东西。 (我对此了解不多。)

 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;
    }

更新

看起来问题出在 easyXDM 中. waitForReady() 未在边缘触发 on(window, "message", waitForReady)。我现在正在深入研究这个问题。

easyXDM 片段:

    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);
    }

上面的代码片段运行，但 waitForReady 方法从未被调用。唯一没有调用它的浏览器是 Edge(适用于 IE8+、Chrome、Safari、FF 和移动版 chrome/safari)。

Answer 1

事实证明，以前的开发人员在我们的 easyXDM 实现中写入了一个必需的“hack”。

在我们实现 easyXDM 时，我们必须更新 IE 上的 Window 对象，因为我们的应用程序在 iFrame 中启动。由于 Edge 在技术上不是 IE 的一个版本，我们的测试失败了，所以代码没有运行以将 window 更新为 easyXDM 上下文中的 window.parent。

我们正在使用 typeof document.documentMode === 'number' 来检测 IE，但是 document.documentMode 在 Edge 中是未定义的，所以我们添加了一个 navigator.userAgent 检查 Edge。

这解决了问题。