javascript - Safari 在请求带有下载 header 的链接时停止 jquery 动画

Question

很抱歉我的问题是否有一个简单的解决方案:我在网上搜索但没有找到任何东西。

当我单击链接到带有下载标题的 url 的 href 时，safari 会停止我所有的 jquery 动画 css 函数。

在我的例子中，我有一个生成一个大 pdf 文件的 php 脚本，它需要很多秒才能完成任务；为了停止用户交互，我打开了一个带有进度条的模式。

在 Chrome 和 firefox 上工作正常，但是当使用下载 header 请求此 url 时，safari 会停止我的 jquery 功能，警报功能可以正常工作。

为了解决这个问题，我在显示模式时和请求链接后管理事件

$('#pdf_download_button').click(function(){

$('#download_modal')
.on('shown.bs.modal', function() {

    location.href = "http://www.example.com/modules/myModules/include/pdf_generator.php";

}).modal('show');

var fileDownloadCheckTimer;
fileDownloadCheckTimer = window.setInterval(function (e) 
{
    if($.cookie('download_pdf'))
    {   
        window.clearInterval(fileDownloadCheckTimer);
        $.removeCookie('download_pdf') 
        $('#download_modal').modal('hide');         
    }
    else
    {   
    }      
}, 1000);
});

但是如果有办法的话，我会在用 jquery 制作的模态中显示动画。

我希望这不是一个老问题。

提前致谢马可

Answer 1

已更新

根据您在评论中告诉我的内容，我更新了代码并将包含 HTML 元素。

<div class="btn-wrapper">
    <button class="btn btn-default" id="pdf_download_button">Download</button>
</div>

<div class="modal" id="download_modal">
    <div id="bar"></div>    
</div>

//shown.bs.modal listener
$('#download_modal').on('shown.bs.modal', function() {
    $('#bar').animate({width: '100px'}, 5000, function () {
        //callback once animation is done
        $('#download_modal').modal('hide');
    });

    location.href = 'http://www.digilog.de/pub/blog/android_download_header_test.php/ctaos/cdafqZIP/';
});

//click listener
$('#pdf_download_button').click(function(){
  $('#download_modal').modal('show');
});

• 我将 shown.bs.modal 事件监听器放置在 click 事件的处理函数之外。
• 我删除了额外的 .modal('show') 因为据我所知，在初始 show
之后没有必要再次声明
• 我正在使用下载链接的示例 url
• 我在 .animate() 回调中关闭模式
• 我在 Safari 5.x 中运行它并且运行良好(下载 zip 文件并为栏设置动画)
• 这里是 jfiddle 的例子:http://jsfiddle.net/k8ALQ/5/