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

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>

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