使用 ajax 调用下载文件时避免触发 window.onbeforeunload

Question

我的申请信息页面上有一个下载按钮，可以下载 pdf。我还为所有页面设置了 window.onbeforeunload 事件以启动我的加载屏幕微调器，并且 window.onunload 事件会终止加载屏幕。我遇到的问题是，当我下载我的 pdf 文件时，下载工作正常，但是 window.onbeforeunload 事件被触发而不是 window.onunload （因为我没有离开页面）。这会导致我的加载页面在我下载文件时启动并且永不停止，使页面看起来挂在下载中。

我正在使用以下 htm 和 javascript 下载我的 SystemInfo.pdf 文件：

<a href="#" onclick="SystemInfo()">Download System Info</a>

function SystemInfo(){
    var url = 'xxxxx/about/SystemInfo?isajax=true';
    window.location = formatURL(url);
}

我试图更改链接以使用“下载”属性，但这与 Safari 和 IE 不兼容，这是 Chrome 和 Firefox 的要求。我还添加了一个动态 iframe 来触发更改，但被告知这是不可取的。如果你能帮忙，请告诉我。

Answer 1

我设法找到了一种解决这个问题的方法，这种方法感觉很流畅，而且不像添加要下载的 iframe 那样麻烦。

我在 SystemInfo() 函数之外创建了一个 js 变量 (oldUnloadValue)，我在 window.onbeforeunload 中分配了原始函数。然后，我将 window.onbeforeunload 设置为我创建的单独函数，该函数会将 window.onbeforeunoad 设置回其原始状态。这让 window.onbeforeunload 在文件下载期间触发，不会产生任何不良影响，但在下载完成后会重置功能。

var oldUnloadValue;

function SystemInfo() {
    oldUnloadValue = window.onbeforeunload;
    window.onbeforeunload = ResetOnBeforeUnload;
    var url = 'xxxxx/about/SystemInfo?isajax=true';
    window.location = formatURL(url);
};

function ResetOnBeforeUnload() {
    window.onbeforeunload = oldUnloadValue;
};

以这种方式做事已经解决了我的问题，但仍然感觉不太理想。