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

最新推荐文章于 2025-08-07 14:32:48 发布

转载最新推荐文章于 2025-08-07 14:32:48 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5add8cfb51882567183ebaec

本文探讨了在账户充值过程中遇到的支付URL被浏览器拦截问题，并提供了多种尝试的解决方案，包括直接打开URL、使用空窗口及模拟点击等方法，最终提出了一种让用户手动触发支付流程的有效方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.问题描述：

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

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

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

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

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

方法二、开始度娘之后~

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

var mywin = window.open();

后台请求得到url以后~

mywin.location.href = URL;

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

方法三、度娘二~

先创建个跳转的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标签，用户自己点击，就不会被拦截啦~~~