在页面写入一个HTML文档

在页面写入一个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>

记录工作中遇见的业务场景以及解决方案