Блог

У меня есть одностраничные приложения DurandalJS, все данные извлекаются из запроса API, и требуемый заголовок включает в себя X-Auth-Token для установки. Все работает, за исключением случаев, когда я вызываю пользовательский модальный для отображения iframe,

Ниже вы можете увидеть, как я настраиваю глобальные настройки Ajax на main.js:

 $(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 , который был установлен ранее.

Кто-нибудь, пожалуйста, помогите.

Предполагая, что запрос не является междоменным, и предполагая, что данные, возвращаемые из динамически сгенерированного 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' }
});