Question

我有一个带有按钮的HTML页面。当用户单击该按钮时，window.location.href将更新为文本文件的URL。文本文件随Content-Disposition: attachment一起提供，因此文件已下载＆amp;无法在浏览器中打开。

问题是此页面上还发生了AJAX请求。每当更改window.location.href时，所有AJAX请求都会以静默方式中止（或者至少不会触发jQuery.ajax error事件）。

那么如何在不重新加载页面或中止任何AJAX的情况下下载文件？我需要在IE7 +中执行此操作（ 更新： 需要在IE7 +和现代浏览器中工作，包括iOS和Android）。

以下是一些示例代码。我在Express中创建了两个端点; /ajax只响应一个简单的JSON; /download十秒后响应文本文件。如果单击“启动AJAX”以请求/ajax，然后单击“开始下载”以请求/download，则会中止AJAX请求。计时器只是为了易于使用。

HTML

<html>

<head>
<title>Firefox Download &amp; AJAX Test</title>

<script src="bower_components/jquery/dist/jquery.js"></script>

<body>
<form method="GET" action="">
<button id="btn-ajax" type="submit">Start AJAX</button>
<button id="btn-download" type="submit">Start Download</button>
</form>

<div id="dynamic-content"></div>

<script>
(function() {
    var $dynamicContent = $("#dynamic-content");

    $("form").submit(function(e) { e.preventDefault(); });

    $("#btn-ajax").click(function() {
        var $btn = $(this).prop("disabled", true),
                left = 10,
                countdown;

        function tick() {
            if ( left <= 0 ) {
                stop();
            }

            $dynamicContent.text(left--);
        }

        function stop() {
            $btn.prop("disabled", false);
            clearInterval(countdown);
        }

        countdown = setInterval(tick, 1000);
        tick();

        $.ajax({
            method: "GET",
            url: "/ajax",
            complete: stop,

            success: function(data) {
                $dynamicContent.text(data.value);
            },

            error: function() {
                $dynamicContent.text("Error!");
            }
        });
    });

    $("#btn-download").click(function() {
        window.location.href = "/download";
    });
})();
</script>

快速路由器

// GET /download
exports.download = function(req, res) {
    res.set("Content-Type", "text/plain");
    res.set("Content-Disposition", "attachment; filename=download.txt");
    res.send("You have downloaded this text file");
};

// GET /ajax
exports.ajax = function(req, res) {
    setTimeout(function() { res.send({ value: "Success!" }); }, 10000);
};

感谢您的时间。

Answer 1

当您设置响应标头以告诉浏览器它是下载时，而不是将当前页面指向链接，为什么不打开一个新窗口（当浏览器看到这样的标题时它会立即消失）

window.open('/download', '_blank');

第二种方法是使用用户看不到的<iframe>指向该位置

<iframe id="downframe" src="about:blank" style="display:none;"></iframe>

document.getElementById('downframe').src = '/download';

更改window.location.href中止AJAX

1 个答案: