巧妙替換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標籤，用戶本身點擊，就不會被攔截啦~~~