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

Question

以下所有内容都会成功将用户重定向到另一个页面(当然还有他们自己的警告):

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

当然,对于询问您是否可以进行更改回调的人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>