nabehiro ブログ

開発・プログラミングに関して適当に書くブログ

ファイルダウンロード完了後に画面遷移などをjavascriptで行う

html javascript

レアケースですが、PDFファイルダウンロード後にページの画面遷移(再読込)を行いたいケースがありました。
javascript(setInterval) と Cookie を利用するとファイルダウンロード後に処理を行うことができます。

サンプル

form submit でファイルダウンロードし、ダウンロードが完了した後に alert を出します。(画面遷移したい場合は、location.hrefなどで)
サーバサイドのファイルダウンロード処理の中では cookie({ name:"downloaded", value:"yes", path:"/"}) を発行します。

※jquery.js, jquery.cookie.js を使用している前提。

<html><body>

<form>
  <input type="submit" value="ダウンロード" />
</form>

<script>
  // aタグで行う場合は、clickイベントで同様のことを行う
  $("form").submit(function() {
    setInterval(function () {
      if ($.cookie("downloaded")) {
        $.removeCookie("downloaded", { path: "/" });
        alert("ダウンロード完了");
      }
    }, 1000);
  });
</script>

</body></html>