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

這工作正常

---

2. 我必須檢查該條目是否有可用的 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 由控制器處理，該控制器為我提供了仍然使用 php 標頭的 pdf 文件。

Answer 1

嘗試這個？

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

Answer 2

如果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 3

考慮為此使用 iframe。 這是一個完全有效的解決方案，可以防止需要偵聽另一個窗口事件，這是不好的做法並且不需要。

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