【JavaScript】ポップアップブロックを回避したい

niffy
2022-08-26
niffy
2022-08-26

はじめに

こんにちは!
リンクを押下した際に、サーバーとの通信を挟んでから別ウィンドウでページを開きたかったのですが、ポップアップブロックに阻まれてしまい開けませんでした。
今回は、それを回避する実装を記載したいと思います。

実装

当初の実装はこんな感じでした。
```
link_open: function(url) {
  logger.send_log().catch(() => {}).then(() => { //サーバーにログを送信
  window.open() //エラーがない場合は遷移
  }
}
```
ところが、この実装だとポップアップブロックに阻まれてうまく遷移できませんでした。
原因はサーバーとの通信が挟まれたことにより、window.openがユーザー操作と見なされていないことでした。
ということは、サーバー通信が入る前に事前にwindowをopenしておけばいいわけです。
```
link_open: function(url) {
  const targetWindow = window.open() //事前にwindowをopen
  logger.send_log().catch(() => {
    targetWindow.close() //通信に失敗した場合は対象windowを閉じる
  })
}
```
こちらで想定の動作になりました。