Question

我有DurandalJS单页应用，从API请求中检索所有数据，并且所需的标头包括要设置的 X-Auth-Token 。一切都有效，除非我调用自定义模式来显示iframe，

下面你可以看到我如何在main.js上设置全局Ajax设置：

$(document)
.ajaxSend(function(event, xhr, settings)
{
    var token = getCookie('X-Auth-Token') || getSession('X-Auth-Token');

     if (token)
        xhr.setRequestHeader('X-Auth-Token', token);
})
.ajaxError(function(event, xhr, settings){
    if (xhr.status === 401)
    {
        tokenExpired();
    }
});

以下是自定义模式的代码：

customModal.js

define(['plugins/dialog', /* etc */ ], function (dialog, /* etc */) {

    var iframeBox = function(id, title)
    {
        this.id         = id;
        this.title      = title;
    };

    iframeBox.prototype.ok = function()
    {
        dialog.close(this);
    };

    iframeBox.prototype.download = function()
    {
        window.location.href = "http://example.com/api/storages/" + this.id + "/download";
    };

    iframeBox.show = function(id, title)
    {
        return dialog.show(new iframeBox(id, title));
    };

    return iframeBox;
});

customModal.html

<div class="modal-content messageBox">
    <div class="modal-header">
        <div class="tr">
            <div class="pull-right">
                <div class="clearfix"></div>
                <button data-bind="click: download">
                    <i class="fa fa-cloud-download"></i>
                </button>
            </div>
            <div class="td td-auto">
                <h5 data-bind="text: title"></h5>
            </div>
        </div>
    </div>
    <iframe data-bind="attr: { src: 'http://example.com/api/storages/' + id + '/view' }">
    </iframe>
    <div class="modal-footer">
       <button class="btn btn-primary" data-bind="click: ok">Ok</button>
    </div>
</div>

显示自定义模式时，
它还会向http://example.com/api/storages/{id}/view

发出请求

但是它没有触发之前设置的全局$.ajaxSend。

任何人都请帮忙。

Answer 1

假设请求不是跨域，并假设从动态生成的URL返回的数据是JSON。即使假设不成立，你也可以用其他设置改变ajax请求的类型，它应该可以工作。

试试这个小提琴http://jsfiddle.net/khagesh17/3qb8X/3/

ko.bindingHandlers.ajaxIframe = {
    update: function(element, valueAccessor) {
        var src = ko.utils.unwrapObservable(valueAccessor());
        // we may use $.load if that fits your purpose of binding html inside iframe
        // i am not aware if you are returning html or json from that url
        $.ajax({
            url: src,
            type: 'post',
            dataType: 'json',
            data: { 
                json: JSON.stringify({
                    'a': '1',
                    'b': '2',
                    'c': '3',
                    'd': '4'
                }),
                delay: 3 
            },
            beforeSend: function(jqXhr) {
                 // here as well you can hook to add header to this request
            }
            success: function(data) {
                // now we have got the data
                // insert the data inside the iframe
                var iFrameDocument = element.contentDocument.body;
                if (iFrameDocument) {
                    var span = document.createElement('span');
                    //just dump all data inside iframe
                    span.innerText = JSON.stringify(data);
                    iFrameDocument.appendChild(span);
                }
            },
            error: function(error) {
                console.log(error.statusText);
            }
        });
    }
};

同样在视图中，应该更新绑定以使用上面的自定义绑定。

<iframe data-bind="ajaxIframe: source"></iframe>

此外，如果您想要为每个请求发送自定义标头，请注意。你也可以这样做

$.ajaxSetup({
    headers: { 'x-custom-header': 'value' }
});

全局AJAX设置无法在自定义模式上启动（DurandalJS）

1 个答案: