Microsoft Edge easyXDM on(" message")事件未被调用

时间:2015-12-23 19:29:16

标签: javascript ajax cors microsoft-edge easyxdm

在Microsoft Edge中,GET请求未运行。我已经逐步完成了代码运行的AJAX请求,并在回调中设置了一个断点。但是,代码永远不会到达回调。

我已经有一个带回调的.then()和.fail()设置,并尝试使用回调添加.done()和.always(),但回调中没有任何代码正在运行。

然后我检查了dev-tools中的网络选项卡,我根本找不到请求。似乎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
 })();

这是科尔斯的东西。 (我不太了解这一点。)

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

更新

问题出现在easyXDMwaitForReady()未在边缘触发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)。

1 个答案:

答案 0 :(得分:0)

事实证明,有一个必要的" hack"以前的开发人员写了我们的easyXDM实现。

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

我们正在使用typeof document.documentMode === 'number'来检测IE,但在Edge中未定义document.documentMode,因此我们为Edge添加了navigator.userAgent项检查。

这解决了这个问题。