ajax打开新窗口被浏览器拦截的解决办法

本文介绍了解决支付窗口被浏览器拦截的问题。通过两种方法实现了安全地打开支付窗口:一是预开空窗口再修改URL;二是将AJAX请求设置为同步确保用户主动触发。

最近在做支付时发现打开支付窗口时被浏览器拦截了,百度了一下才发现是因为打开窗口前用ajax验证是否能支付,所以不是用户主动触发的打开ixin窗口,浏览器认为这样不安全,所以给拦截了。

解决办法一

先开始打开一个空的新窗口,然后改变新窗口的url,具体代码为

var wd = window.open();
$.ajax({
    type: "POST",
    dataType: "json",
    url: URL,
    data: {orderNo:orderNo},
    success: function(data) {
        if(data.status=='success'){
            wd.location.href = 'http://www.baidu.com';
        }else{ 
            alert('订单不能支付!'); 
        }
    },error: function(data) {
        alert("正在加载请稍后!");
    }
});

这种实现方式有个弊端,就是不管ajax有没有成功,都会执行 var wd = window.open();这行代码,所以成功和失败都会打开一个新窗口,除非在失败后进行关闭,但这样用户体验会非常不好,所以我用的第二种方式去实现的。

解决办法二

因为ajax是默认是异步的,这样性能高,用户体验好,但这也导致了安全问题,要让浏览器认为弹出新窗口是安全的,必须让弹新窗口之前所有的ajax是同步的,具体代码为

$.ajax({
    type: "POST",
    dataType: "json",
    url: URL,
    async: false,//同步请求
    data: {orderNo:orderNo},
    success: function(data) {
          if(data.status=='success'){
             window.open("www.baidu.com");
          }else{
             alert('订单不能支付!');
          }
    },
    error: function(data) {
        alert("正在加载请稍后!");
    }
});
在开发过程中,遇到Ajax请求成功后使用window.open打开新窗口浏览器拦截的情况是很常见的。为了解决这一问题,建议深入阅读《解决Ajax响应后window.open被拦截的问题》这篇文章,它将为你提供多种解决方案,并帮助你更好地理解问题背后的原因。 参考资源链接:[解决Ajax响应后window.open被拦截的问题](https://wenku.youkuaiyun.com/doc/6412b5e4be7fbd1778d44c5f?spm=1055.2569.3001.10343) 首先,我们需要了解浏览器拦截window.open的机制。现代浏览器会基于用户交互的上下文来判断是否拦截新开窗口,因为它们认为这是为了防止恶意软件自动打开新窗口。因此,我们可以采取以下几种策略: 1. **在用户触发的事件中提前打开窗口**:在用户交互(如点击事件)中预开一个空白窗口,并在Ajax请求成功后,通过回调函数将该窗口的location属性指向新的URL。这种方法的代码示例如下: ```javascript function openWindow() { var newWindow = window.open('', '_blank'); makeAjaxRequest(function(url) { newWindow.location.href = url; }); } function makeAjaxRequest(callback) { // 假设的Ajax请求实现 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { callback(xhr.responseText); } }; xhr.open('GET', 'your-endpoint', true); xhr.send(); } ``` 注意,在实际应用中,需要处理Ajax请求失败的情况,避免新窗口为空白。 2. **使用同步Ajax请求**:虽然这种方法会影响用户体验,但在某些特定场景下可以作为一种备选方案。你可以将XMLHttpRequest的async属性设置为false,使得Ajax请求同步执行。 3. **改变设计策略**:考虑到用户体验和现代Web设计的趋势,改变设计策略避免使用新窗口是一种更为推荐的方法。比如,在当前页面内通过弹出模态框展示新内容,或在页面内进行内容更新。 总之,解决Ajax请求后window.open被浏览器拦截的问题需要综合考虑用户体验和浏览器安全策略。《解决Ajax响应后window.open被拦截的问题》为你提供了全面的解决方案,建议在解决当前问题后,继续深入学习相关的技术细节,以获得更全面的知识。 参考资源链接:[解决Ajax响应后window.open被拦截的问题](https://wenku.youkuaiyun.com/doc/6412b5e4be7fbd1778d44c5f?spm=1055.2569.3001.10343)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值