在页面写入一个HTML文档
业务场景:
后端接口返回一个支付的HTML文档 前端拿到数据后在页面把HTML文档渲染出来并支付
确认订单页,调支付接口
// 微信公众号支付
async wxPayment() {
// debugger
const ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){ // 在微信浏览器打开
this.$toast.loading('加载中...');
let urls = window.location.href;
//失败回调地址
let failed = urls;
//成功回调地址
let success = window.location.href.split('/#/')[0].split('#')[0] + '#/'+'order?';
await weixinPay(this.orderId,failed,success).then( res => {
if(res.data.error == '0000'){
//接口返回的HTML文档
let htmls = res.data.datas;
//将获取到的数据存到localStorage 供渲染页使用
localStorage.removeItem('callbackHTML');
localStorage.setItem('callbackHTML',htmls);
let urls = window.location.href.split('/#/')[0].split('#')[0] + '#/';
//页面跳转 也可以使用路由跳转 使用路由可以把参数放到路由里面 不必使用localStorage
window.location.href = urls + 'repeaterPay';
}
})
this.$toast.clear();
}else{
this.$toast.fail('请在微信中打开');
}
},
渲染接口返回的HTML文档
通过document.write()方法向页面写入一个HTML文档
<template>
<div class="repeater"></div>
</template>
<script>
export default {
data(){
return{}
},
created() {
},
mounted(){
//write() 方法可向文档写入 HTML 表达式或 JavaScript 代码
//可列出多个参数(exp1,exp2,exp3,...) ,它们将按顺序被追加到文档中。
setTimeout(() => {
document.write(localStorage.getItem('callbackHTML'));
document.close();
},1000)
},
methods: {},
}
</script>
<style lang="scss" scoped>
</style>
记录工作中遇见的业务场景以及解决方案