JavaScriptでのダウンロード処理

Question

前提

Javscriptでダウンロード処理を実現しようとしています。
下記のようなプログラムを作成しました。

window.open(download_url);
setTimeout(function(){
    location.reload();
},1000)

質問内容

このようなプログラムを作成した場合、location.reload();の動くタイミングというのは、
window.openをしたダウンロードファイルが完了した後になるのでしょうか。

デベロッパーツールで見ると、location.reload();の処理を通った後にconsole.log('a');
の処理を入れると、コンソールにログが出力され通っているのですが、
ファイルのダウンロードが完了するまで、リロードしないように見えます。

よろしくお願いいたします。

Answer 1

仮に開くのに3秒かかるページを用意します
// sample.php

<?PHP
sleep(3);
print "opend";

普通に書くとwindow.openの完了をまちません

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  btn.addEventListener('click',()=>{
    const start=new Date().getTime();
    const w=window.open("sample.php","_blank");
    setTimeout(()=>{
      const end=new Date().getTime();
      console.log((end-start)/1000); // 約1秒
    },1000);
  });
</script>
<input type="button" id="btn" value="btn">

windowのopenを待って処理したいならこう

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  btn.addEventListener('click',async()=>{
    const start=new Date().getTime();
    await new Promise(resolve=>{
    const w=window.open("sample.php","_blank");
      w.onload=()=>resolve();
    });
    setTimeout(()=>{
      const end=new Date().getTime();
      console.log((end-start)/1000); // 約4秒
    },1000);
  });
});
</script>
<input type="button" id="btn" value="btn">

Comments

[amara]

有り難うございます。

phpでサーバーからダウンロードURLを渡しているのですが、
xdebugを使用しており、ダウンロードファイルを受け渡すところでPHPの処理を止めてしまうと、
リロードの処理もPHPが動かないため、ステップ実行を解除して進めるまで、リロードできないように見えているようでした。
非同期の回答も有り難うございます。

Answer 2

location.reload();の動くタイミングというのは、window.openをしたダウンロードファイルが完了した後になるのでしょうか。

window.openは別タブでの処理となるので、いまいるタブでのJavaScript処理は、ダウンロード状況と無関係に進行します（もちろん、今いるタブがリロードされようが、ダウンロードの進捗には何も影響しません）。

location.reload();の処理を通った後にconsole.log('a');の処理を入れると、コンソールにログが出力され通っているのですが

setTimeout(function(){
    location.reload();
},1000)
console.log('ここのコードは1秒を待たずに、location.reloadより前に実行される');