最近H5对接后端从支付宝返回的form。踩了一些坑。
支付宝支付返回的form结构大概是这样的：
<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文档。
- 第一种解决方案
\\ 假设result是后端返回的from字符串
const newWindow = window.open('', '_self');
newWindow.document.write(result);
newWindow.focus();
如果是在PC端处理，这种方式是没问题的。但是需要注意三个问题：
- window.open()在接口回调中触发，可能会被浏览器拦截
-
如果本身页面的地址是https的，如果返回的form的action是http的，浏览器也会弹出安全提示。
image.png
- 微信环境window.open()不生效
- 第二种解决方案
虽然返回的result的form外面有html包裹，但是我们动态创建一个div容器，然后将包含<html>的result渲染进去，通过js触发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设置为了_blank
document.forms['cashierSubmit'].setAttribute('target', '_blank');
导致了在IOS上的浏览器（微信环境，safari，UC）都无法实现form表单的提交。
改成_self之后，问题解决。
网友评论