javascript - window.onload не запускается

Question

То, что я пытаюсь сделать, это инструмент, в который он будет экспортировать PDF-файл.

Есть два случая:

1. Мне не нужно ничего проверять, и сразу после того, как пользователь нажимает кнопку экспорта, он открывает новое пустое окно, потому что я использую заголовкичтобы загрузить файл и после завершения загрузки пустой страницы он закроется.

сценарий для случая 1

$('body').on("click", '.export-invoice-pdf', function () {
    // get id
    let id = $(this).closest('tr').data('id');
    let newWindow = window.open(
        'url' + id,
        "_blank"
    );
    newWindow.onload = function() {
        newWindow.close();
    };
});

Это прекрасно работает

---

Я должен проверить, есть ли доступный файл PDF для записи.перед открытием нового пустого окна, чтобы получить файл, а затем закрыть его, как в сценарии case1

для случая 2:

$('body').on("click", '.export-invoice-pdf', function () {
    // get id
    let id = $(this).closest('tr').data('id');
    let newWindow = window.open(
        '',
        "_blank"
    );
    //Ajax call to check if there is an available file
    $.ajax({
        type: 'POST',
        url: 'url',
        data: {'orderId': orderId},
        dataType: 'json',
        encode: true,
    }).success(function (data) {
        console.log('1');
        if (data.hasFile === true) {
            //if has file do the samething as case 1
            newWindow.location.href = 'url' + orderId;
            newWindow.onload = function() {
                 newWindow.close();
            };
        } else {
            alert('no file to export');
        }
    }).error(function () {
    });
});

Теперь это не работает.На самом деле моя первая проблема заключалась в том, что он не делал новое окно, потому что оно рассматривает его как всплывающее окно, но я исправил это после часа исследований.Теперь закрытие окна - моя проблема.

Я уже посмотрел его и до сих пор смотрю не только здесь, но, к сожалению, я не смог найти ответ по этой проблеме.Любая помощь приветствуется.

---

Обновление: Мне помогло то, что я использовал XMLHttpRequest, так что мне не нужно открывать новую пустую вкладку, чтобы моиЗаголовки php послужат мне файлом PDF.

Вот код, который я использую:

    let xhr = new XMLHttpRequest();

    //we use responseType arraybuffer so that the pdf file won't be blank
    xhr.open('GET', url);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function(e) {
        if (this.status === 200) {
            var blob = new Blob([this.response], {type:"application/pdf"});
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = "nameofpdf.pdf";
            link.click();
        }
    };
    xhr.send();

URL-адрес, который я использовал, был обработан контроллером, который все еще дает мне файл PDFс использованием заголовков php.

Answer 1

Блокировщики всплывающих окон обычно не допускают всплывающие окна (или программный щелчок по динамически создаваемым гиперссылкам и т. Д.), Если window.open() не вызывается прямым действием пользователя.В каждом браузере есть немного другой механизм блокировки всплывающих окон.

В вашем случае 1 сначала весь код запускается в главном потоке в результате нажатия пользователем кнопки экспорта.Это прекрасно работает.

В случае 2, открытие окна может работать не во всех браузерах, поскольку оно вызывается из другого потока.Обработчик успеха Ajax будет вызываться асинхронно еще долго после завершения события onclick.

Чтобы исправить это, вы можете использовать синхронные запросы для выполнения всего кода в основном потоке.Вы можете XMLHttpRequest или асинхронную опцию $.ajax({async: false}).Это гарантирует, что ваш код будет работать во всех браузерах, так как они меняют свои алгоритмы блокировки всплывающих окон.

Реализация приведенных выше предложений может помочь решить вашу проблему с window.onload(), не вызванным, но есть и другое улучшение, которое можно сделать -добавив обработчик onload перед навигацией:

//if has file do the samething as case 1
newWindow.onload = function() {
     newWindow.close();
};
newWindow.location.href = 'url' + orderId;

Или, что еще лучше, добавьте его в основной поток сразу после

let newWindow = window.open(
    '',
    "_blank"
);
newWindow.onload = function() {
     newWindow.close();
};

Надеюсь, это поможет.

Answer 2

Подумайте об использовании iframe для этого.Это совершенно правильное решение, которое исключает необходимость прослушивания другого события окна, что является плохой практикой и не требуется.

function downloadFile(fileUrl) {
        var downloadIframe = $('#download-iframe');
        if (downloadIframe) {
              downloadIframe.remove();
        }
        $('<iframe>', {
            id: 'download-iframe',
            src: fileURL
        }).hide().appendTo('body');
}

Answer 3

Попробуйте это?

$('body').on("click", '.export-invoice-pdf', function () {
    //Ajax call to check if there is an available file
    $.ajax({
        type: 'POST',
        url: 'url',
        data: {'orderId': orderId},
        dataType: 'json',
        encode: true,
    }).success(function (data) {
        console.log('1');
        if (data.hasFile === true) {
            //if has file do the samething as case 1
            // get id
            const id = $(this).closest('tr').data('id');
            Object.assign(document.createElement('a'), {
                target: '_blank',
                'url' + orderId,
            }).click();
            // make user close the tab
        } else {
            alert('no file to export');
        }
    }).error(function () {
    });
});