最近H5對接后端從支付寶返回的form准潭。踩了一些坑典尾。
支付寶支付返回的form結(jié)構(gòu)大概是這樣的：
<html>
<form id="cashierSubmit" accept-charset="UTF-8" name="cashierSubmit" action="***" method="post">
<input type="hidden" name="orderType" value='' />
<input type="hidden" name="commodity" value=''
/>
<input type="hidden" name="merchantCode" value='' />
<input type="hidden" name="sign" value=''
/>
<input type="hidden" name="orderAmt" value='' />
<input type="hidden" name="srcType" value='H5' />
<input type="hidden" name="expireTime" value='' />
<input type="hidden" name="feature" value=''
/>
<input type="hidden" name="outTradeNo" value='' />
<input type="hidden" name="notifyUrl" value=''
/>
<input type="hidden" name="signType" value='' />
<input type="hidden" name="payChannel" value=''
/>
<input type="hidden" name="returnUrl" value=''
/>
<input type="hidden" name="notifyInfo" value=''
/>
<input type="submit" value="提交" style="display:none;">
</form>
<script>
document.forms['cashierSubmit'].submit();
</script>
</html>
這可以看成是一個完整的html文檔身冀。
- 第一種解決方案
\\ 假設(shè)result是后端返回的from字符串
const newWindow = window.open('', '_self');
newWindow.document.write(result);
newWindow.focus();
如果是在PC端處理睹耐，這種方式是沒問題的辐赞。但是需要注意三個問題：
- window.open()在接口回調(diào)中觸發(fā)，可能會被瀏覽器攔截
-
如果本身頁面的地址是https的硝训，如果返回的form的action是http的响委，瀏覽器也會彈出安全提示。
image.png - 微信環(huán)境window.open()不生效
- 第二種解決方案
雖然返回的result的form外面有html包裹窖梁，但是我們動態(tài)創(chuàng)建一個div容器赘风，然后將包含<html>的result渲染進去，通過js觸發(fā)form表單提交也是沒問題的纵刘。
const div = document.createElement('formdiv');
div.innerHTML = result;
document.body.appendChild(div);
document.forms['cashierSubmit'].setAttribute('target', '_self');
document.forms['cashierSubmit'].submit();
div.remove();
對于H5來說第二種方案兼容性更好邀窃。
需要注意的是：
一開始我將form的target設(shè)置為了_blank
document.forms['cashierSubmit'].setAttribute('target', '_blank');
導致了在IOS上的瀏覽器（微信環(huán)境，safari假哎，UC）都無法實現(xiàn)form表單的提交瞬捕。
改成_self之后，問題解決舵抹。
