调用支付宝网页支付被浏览器拦截

问题：在开发网页支付宝支付业务时，调用支付宝的返回的是一个完整的html页面，浏览器误认为是广告类窗口进行拦截屏蔽。

解决办法：主动触发打开新的标签页

// 生成订单号，跳转项目空页面渲染支付宝返回的完整页面
generateOrderNo() { 
   // 开启一个新的标签页
   const newWin = window.open('about:blank'); 
   this.$http.post(userSelfUrl + '/order', this.itemsInfo).then((res) => { 
     if (res.data.ecode == ResEcode) { 
        const resData = res.data.data 
        const data = { orderNo: resData.orderNo, rechargeType: 1 } 
        const {href} = this.$router.resolve({ name: 'Alipay', query: data }) 
        const url = 'http://' + window.location.host + '/' + href 
        // 重定向url到项目中的空页面
        newWin.location.href = url 
        } else { 
          this.responseText = res.data.msg 
        } 
    }) 
}

// 支付组件
<template>
  <div>
    <div v-html="alipayInfo"></div>
  </div>
</template>
<script>
  import {userSelfUrl} from '../../../assets/js/api'
  export default {
    name:'Alipay',
    data(){
      return {
        alipayInfo:''
      }
    },
    methods:{
      toPay (data) {
        // 根据订单数据请求支付宝的支付页面
        this.$http.post(userSelfUrl + '/pay', data).then((res) => {
          if (res.data.ecode == ResEcode) {
            //得到的支付宝的完整支付页面字符串
            this.alipayInfo = res.data.data
          } else {
            this.responseText = res.data.msg
          }
        })
      },
    },
    created (){
      this.toPay(this.$route.query)
    },
    updated () {
      // 支付宝支付页面提交付款
      document.forms[0].submit()
    }
  }
</script>

当然还有其他更好的办法，仅供参考