window.location更改完成后有没有办法触发回调？

Question

以下所有内容都会成功将用户重定向到另一个页面（当然还有their own caveats）：

• window.location.replace(new_url)，
• window.location.assign(new_url)，
• window.location = new_url，

对someone asking if you can get a callback for changing location的典型响应当然是否定的，因为将用户推向新页面意味着页面上的脚本不再有效。

这一切都很好，但是如果您使用上述三种方法中的任何一种来下载文件，那么用户不仅会保持与它们相同的页面，而且还会有轻微的延迟（取决于更新location和文件实际开始下载之间的网络速度。

在这种情况下（用户保留在更新window.location的页面上），是否有任何方法可以创建一个回调，例如，在重定向之前显示加载图标，直到文件实际开始下载？

Answer 1

您可以创建一个隐藏的iFrame，指向可下载的文件。用户不会注意到差异，同时您可以继续在主文档上运行脚本。

function downloadURL(url, callback){
   var hiddenIFrameID = 'hiddenDownloader' + count++;
   var iframe = document.createElement('iframe');
   iframe.id = hiddenIFrameID;
   iframe.style.display = 'none';
   document.body.appendChild(iframe);
   iframe.src = url;
   callback();
}
downloadURL("http:\\...", function() { alert('is downloading'); });

Answer 2

我写了以下代码，受到@Semyon Krotkih答案的启发。它用户jQuery。它也没有任何错误支持，但它的工作原理:)

function downloadURL(url, callback) {

    var id = 'hiddenDownloader';
    $('body').append('<iframe id="' + id + '" style="display: block" src="' + url + '"></iframe>');

    var $iframe = $('#' + id);
    $iframe.on('load', function () {
        $iframe.remove();
        // no error support
        callback();
    });
}


downloadURL('http://example.com', function() {
  alert('Done');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>