🔖
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>
非同期の処理からのレスポンスをパラメータにする必要あったため,上記のような形になりました.
Discussion