巧妙替换window.open被拦截的问题

1.问题描述：

帐户的充值问题，在提交充值信息获取充值单号之后，再调取后台的接口，获得支付宝或者银行第三方的url进行支付！

2.解决过程： 方法1、直接在发送请求得到url后，用window.open打开；

<a class="tijiao" @click="tijiao">提交</a>

window.open(this.$http.getUrl()+"/rest/alipay/toPay?type=2&&orders="+this.rechargeNo);

。。。。。。华。丽。丽。滴。被。拦。截。。。。。。。。。

方法2、开始度娘以后~

在click事件时开启一个新的空窗口，而后异步请求到信息后将该窗口的location改变，该方法不合适的地方是，浏览器默认会当即跳转到空窗口，弹出悬浮窗在父窗口，没法被用户看到

var mywin = window.open();

后台请求获得url之后~

mywin.location.href = URL;

。。。。。。再。一。次。华。丽。丽。滴。被。拦。截。。。。。。。。。

方法3、度娘二~

先建立个跳转的a元素，模拟发送click请求后将该元素从文档中删除；

let myhref=this.$http.getUrl()+"/rest/alipay/toPay?type=2&&orders="+this.rechargeNo;
      var a = document.createElement('a');
      document.body.appendChild(a);
      a.innerHTML = '<a href="'+myhref+'" target="_blank" id="openWin"></a>';
      document.getElementById("openWin").click();//点击事件
        let myNode=document.getElementById("openWin");
        document.body.removeChild(myNode);
复制代码

。。。。。。放。。。弃。。。。。。。。。

3.缘由分析

当浏览器检测到非用户操做产生的新弹出窗口，则会对其进行阻止。由于浏览器认为这多是一个广告，不是一个用户但愿看到的页面。对于向后台发送请求以后的打开，都认为是非用户操做，部分浏览器就会自动拦截掉。

4.最终解决方案

<div class="toast"  v-if="sureBox">
    <div class="toast_title">
      是否继续支付该笔充值？
    </div>
    <div class="btnWarp">
      <a  v-show="isCheck=='zfb'" :href="zfbhref" @click="toTwo" target="_blank">支付</a>
      <a  v-show="isCheck=='wx'" @click="toTwo">支付</a>
      <a v-show="isCheck=='yhk'" :href="yhkhref" @click="toTwo" target="_blank">支付</a>
      <a v-show="isCheck=='yhk2'" :href="yhk2href" @click="toTwo" target="_blank">支付</a>
      <a @click="sureBox = false" class="qxBtn">取消</a>
    </div>
</div>
复制代码

直接写一个弹出框，按钮为带有后台url的a标签，用户本身点击，就不会被拦截啦~~~