🔖

Safariのポップアップブロックによって,非同期関数呼びだし後のsubmitでPOST遷移しなかったときの対処法

2022/08/05に公開

JavaScriptでsubmit()がSafariのブラウザで動作しない

  • 現在開発中の案件にて,Safariでフォーム送信後,遷移がうまくできていない不具合が出ていました.
  • 調査したところ,非同期処理が絡んでいて,かつ,ポップアップブロックが「on」の状態では,うまく遷移できない状態になっていたようでした.そこで解決策を調査してみましたので,ここにまとめていきます.

解決後のコード

  • 非同期処理の前にwindow.openして,そこにPOSTすることでうまく遷移できるようになりました.
post.js
const postFunction = (url, params, target) => {
 const form = document.createElement('form');
    form.action = url;
    form.method = 'post';
    form.target = target
    

 const q = document.createElement('input');
    q.value = params.value;
    q.name = params.name;

    form.appendChild(q);
    document.body.appendChild(form);

    form.submit();
}
post.vue
<script setup>
 const handleClick = () => {
  window.open("about:blank","post_target");
  
  asyncFunc().then(({data}) => {
    const obj = { value: data.result.value, name: data.result.name }
    postFunction("http://hoge.com", obj, "post_target")
  })
 }
</script>

非同期の処理からのレスポンスをパラメータにする必要あったため,上記のような形になりました.

Discussion