一.向支付宝发起请求订单请求之后支付宝会返还一个html代码，是一个表单提交，点击立即支付就会跳转到一个新的页面，只有二维码，在这个页面扫码即可完成支付
上面就是支付宝接口返回的html片段，使用v-html或者原生innerHTML渲染到页面上去是什么都看不见的，如果我们想让他在页面中出现而不是跳转出现的话，我们需要使用iframe属性，iframe属性具体参考HTML <iframe> 标签，使用replace属性替换掉其中的字段
二.res.data.formInfo = res.data.formInfo.replace("<script>document.forms[0].submit();","<iframe style='border: 1px;' name='myFrame' width='210px' height='210px;' ></iframe>") 其中res就是支付宝接口的正确返回值，formInfo就是代码片段，将他的srcipt替换成我们需要的iframe标签，并且表明iframe标签的style
三. res.data.formInfo = res.data.formInfo.replace(`name="punchout_form"`,`name="punchout_form" target="myFrame" `) 我们再将他的name="punchout_form"替换成name="punchout_form" target="myFrame"，其中的"为了避免转义我们使用的是字符串模板``，向iframe里面添加了name='myFrame'，是因为支付宝表单采用的是post请求，具体可以参考文档https://www.cnblogs.com/java-chanjuan/p/7170257.html
四.this.zfbcode = res.data.formInfo 获取到替换之后的html代码将他执行到页面中
五.表单提交会触发post请求和支付宝接口带上的js文件，想要获取到二维码我们必须触发这个函数才能在iframe里面跳转到二维码
this.$el.getElementsByTagName('form')[0].submit() 这个串代码可以触发当前绑定在from上面的submit这个方法，我们所需要做的就是延时执行
上代码，因为我用的是纯原生演示，没有用vue，所以会有一点点不同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="zfb-code"></div>
</body>
<script>
（省略请求后端接口过程）
var str = `从服务器获取到的支付宝html（第一步中的截图）`;
str = str .replace(`name="punchout_form"`,`name="punchout_form" target="myFrame" `)let zfb = document.querySelector(".zfb-code");
str = str.replace(
`name="punchout_form"`,
`name="punchout_form" target="myFrame" `
);
zfb.innerHTML = str;
setTimeout(() => {
console.log(document.getElementsByTagName("form"));
document.getElementsByTagName("form")[0].submit();
}, 300);
</script>
</html>
成功渲染出来！
2948
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
