使用window.open打开新窗口被浏览器拦截的解决方案
问题描述:
代码中直接使用window.open('//www.baidu.com', '_blank');
会被浏览器窗口拦截
原因
浏览器为了维护用户安全和体验,在JS中直接使用window.open(url,"_blank")来打开新的链接是会被拦截的。
通常项目需要在ajax异步请求完成后来打开新链接,下面提供几种解决方案
解决方案
1.最常用的(在ajax异步请求成功后打开新窗口)
//先在ajax函数之前打开新窗口后再加载url $('#btn').click(function () { // 打开页面,此处最好使用提示页面 var newWin = window.open(); newWin.document.body.innerHTML="正在加载中......"; $.ajax({ url: 'www.###.com', success: function (url) { // 重定向到目标页面 newWin.location.href = url; } }) });
2.利用a标签跳转,能解决大多数浏览器兼容问题,但是这种方不适用于ajax异步请求回调中打开新窗口,在ajax异步请求完成后调用无效(用户点击事件触发)
function newWin(url){ //新窗口打开 var a = document.createElement('a'); a.setAttribute('href', url); a.setAttribute('style', 'display:none'); a.setAttribute('target', '_blank'); document.body.appendChild(a); a.click(); a.parentNode.removeChild(a); }; document.body.addEventListener('click', function() { newWin('http://www.baidu.com'); });
相关推荐
chongxiaocheng 2020-08-16
ppsurcao 2020-06-14
kentrl 2020-11-10
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
ajaxhe 2020-08-16
lyqdanang 2020-08-16
curiousL 2020-08-03
TONIYH 2020-07-22
时光如瑾雨微凉 2020-07-19
83510998 2020-07-18
坚持着执着 2020-07-16
jiaguoquan00 2020-07-07
李永毅 2020-07-05