Ajax请求响应中用window.open打开新窗口被拦截的解决方法

一、问题描述

ajax 异步请求成功后需要新开窗口打开 url，使用的是 window.open() 方法，但是会被浏览器给拦截了，需要用户点下。

二、问题分析

　　浏览器之所以拦截新开窗口是因为该操作并不是用户主动触发的，所以它认为这是不安全的就拦截了，即使 ajax 回调函数中模拟执行 click 或者 submit 等用户行为（trigger('click')），浏览器也会认为不是由用户主动触发的，因此不能被安全执行，所以被拦截。

说明：

1、如果是在 <a href="javascript:void(0)" onclick="fun()"></a> 这个中指定的 fun方法中调用 window.open()则不会被拦截，因为浏览器会认为是主动的。 但是在ajax请求的响应中打开窗口是会被拦截的。

2、如果不是打开新窗口，而是改原来的网页地址，可以使用window.location = newurl 来实现，这样不会被拦截。

三、解决方案

在ajax请求之前，先用window.open 打开一个空白窗口，然后在ajax的响应函数中设置该窗口的location属性为新的url。

代码示例如：

function fun(){
var tmpWin =window.open()
ajax(xxx, handle(){
//回调函数。这是伪代码，语法不准。
var newurl = xxxx
tmpWin.location = newurl;
})
}

上面方法，存在一个问题时，因为先打开了空白窗口，如果ajax请求失败（网络或业务逻辑问题）后， 新窗口中就不会有正常的结果体现，有可能造成用户疑惑。
一个解决办法是，当ajax出现问题时，可以考虑给出一个提示，如 tmpWin.document.write("服务器处理异常");

甚至为了防止ajax响应时间过长，当窗口新建后，立即给出提示 tmpWin.document.write("服务器正在处理中，请稍后");

后面如果ajax正常返回，则因为设置了location值，原来打印的信息会被新的页面信息覆盖。

这里还有一种方法，但也有缺陷：

因为ajax可以设置为同步请求，这样可以在ajax请求之后，利用window.open打开新窗口。如：

function fun(){
var result;
ajax({ //需要设置同步请求
.....
result = xxx
.......
})
if(result){
window.open(xxxx)
}
}

上面的做法，因为是对ajax请求的结果判断后，才打开新窗口，避免了上面说的问题。
但是因为是同步请求，在我们测试中发现一个问题，如果服务器响应时间过长，一是界面会停顿（用户体验不好），二是新窗口会被拦截。

只有在服务器很快返回时才没有问题。 我们测试时，在服务器代码处理中sleep了1秒，发现新窗口就被拦截了。

四、小结

总结下，可以看出，对于在ajax返回后打开新窗口，没有特别完美的方法。具体还是要根据自己系统的业务特点来采取相应的做法。

以上所述是小编给大家介绍的Ajax请求响应中用window.open打开新窗口被拦截的解决方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • ajax怎么打开新窗口具体如何实现

    复制代码 代码如下: var newwindow=window.open('about:blank'); jQuery.ajax({ type: 'POST', url: 'clickRate.action', dataType:'json', data:{ 'appId': appId }, success: function(data){ if (data.success == true) { newwindow.location.href=url; }else{ newwindow.clo

  • Ajax打开新窗口被浏览器拦截的两种解决办法

    最近在做支付时发现打开支付窗口时被浏览器拦截了,百度了一下才发现是因为打开窗口前用ajax验证是否能支付,所以不是用户主动触发的打开ixin窗口,浏览器认为这样不安全,所以给拦截了. 解决办法一 先开始打开一个空的新窗口,然后改变新窗口的url,具体代码为 var wd = window.open(); $.ajax({ type: "POST", dataType: "json", url: URL, data: {orderNo:orderNo}, succes

  • Ajax请求成功后打开新窗口地址

    废话不多说,关键代码如下所示: jQuery.ajax({ "type":"post", "url":"http://www.baidu.com", "success":function(rel){ if(rel.isSuccess){ window.open(rel.url,"_blank"); } } }); 这个url请求成功后window.open(rel.url,"_

  • Ajax请求响应中用window.open打开新窗口被拦截的解决方法

    一.问题描述 ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是会被浏览器给拦截了,需要用户点下. 二.问题分析 浏览器之所以拦截新开窗口是因为该操作并不是用户主动触发的,所以它认为这是不安全的就拦截了,即使 ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('click')),浏览器也会认为不是由用户主动触发的,因此不能被安全执行,所以被拦截. 说明: 1.如果是在 <a href="javascri

  • javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法

    在系统中,会一些地方使用javascript open window.比如打开固定模式的窗口,防止用户进行其他操作. 参数: 复制代码 代码如下: 参数 | 取值范围 | 说明alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后 alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上 depended | yes/no | 是否和父窗口同时关闭 directories | yes/no | Nav2和3的目录栏是否可见 height | pixel v

  • vue路由跳转打开新窗口(window.open())和关闭窗口(window.close())

    目录 vue路由跳转打开新窗口和关闭窗口 编程式导航 window.open( )方法 关闭窗口 window.close() vue路由跳转打开新窗口(被浏览器拦截) 第一种方法 第二种方法 第二种方法(改良版) 总结 vue路由跳转打开新窗口和关闭窗口 需求:从当前页面跳转到其他页面时,打开一个新窗口 比如:点击页面上的用户反馈,打开用户反馈的新页面,要使用编程式导航 编程式导航 使用路由对象的resolve的方法解析路由,可以得到location.router.href等目标路由的信息,只

  • JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题

    JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题

    一.鼠标进入容器方向的判定 判断鼠标从哪个方向进入元素容器是一个经常碰到的问题,如何来判断呢? 首先想到的是:获取鼠标的位置,然后经过一大堆的if..else逻辑来确定.这样的做法比较繁琐,下面介绍两种比较方便的方法: 第一种方法,利用圆和反正切三角函数 如下图所示: 以div容器的中心点作为圆心,以高和宽的最小值作为直径画圆,将圆以[π/4,3π/4),[3π/4,5π/4),[5π/4,7π/4),[-π/4,π/4)划分为四个象限. 代码如下: $(".box").on(&quo

  • mui 打开新窗口的方式总结及注意事项

    一.什么是良好的用户体验(淘宝.易迅) 1.预加载截图方式:点击.切换模版窗口.显示等待框.执行ajax并渲染.显示数据.关闭等待框. 2.head.body分开载入方式:点击.切换窗口显示等待中.执行ajax并渲染页面.将渲染好的页面append到body中. 3.lazyload等方式感觉太贴近网页,就不算在良好用户体验内了. 二.注意事项 1.窗口切换时执行并发任务(ajax请求或渲染页面)会影响体验 2.无从得知webview渲染完毕的时机 3.使用pop-in应该将动画延长到200-3

  • vue 路由跳转打开新窗口被浏览器拦截问题处理

    触发事件请求接口根据条件去判断在进行路由跳转:   <a @click="getGetMyPortfolioById(scope.row) ">查看</a>    getGetMyPortfolioById(vals) {      getMyPortfolioById({       }).then(response = >{          const routerdata = this.$router.resolve({             

  • js打开新窗口方法整理

    window.location="aaa.aspx" 上面的方法只能在当前页打开,如果要在新的页面打开,最简单的是用以下方法 form.target="_blank"; form.action="aaa.aspx"; form.submit(); window.top.location=url 可以在iframe中的页面在父窗口刷新打开 window.open方法可控制的样式丰富,比如我们可以控制窗口显示的大小,窗口显示的内容,以及位置等等.都是

  • JS打开新窗口防止被浏览器阻止的方法

    本文实例讲述了JS打开新窗口防止被浏览器阻止的方法.分享给大家供大家参考.具体分析如下: 用传统的window.open()方式打开新窗口,会被浏览器阻止,那么,我们如何才能让JS打开新窗口不被浏览器阻止呢?其实办法还是有的,这里我们就来分析一下如何解决这个问题 我最近也遇到了这样的问题,所以就把弹出新窗口的方法分享给大家.欢迎大家补充哦... 第一种.使用原生javascript的window.open()方法(大部分情况下会被浏览自阻止) 第二种.模拟表单(form)提交,原理是指定表单的a

随机推荐