js实现避免浏览器拦截弹出新页面的方法

滞光索引
• 阅读 4973

“想通过javascript在浏览器新标签页或新窗口打开一个新的页面,结果被浏览器大大无情给拦截了”
业务需求:前端提交数据到后端,后端返回url,然后在新窗口打开该url。
(前后端数据请求使用异步请求的方式)

自己常用的两种打开新窗口的方式

window.open()
用a标签的target="_blank"
在模板中插入一个a标签,然后javascript去触发a链接的click,实现跳转。(该方法在jQuery跟js中有坑...)
//jQuery

<a href="http://wuliv.com" id="openNew"></a>
$(function(){
  $('#openNew').click()
})
//失败无效
 
//***jQuery***
<a href="http://wuliv.com" id="openNew">
  <span><span>
</a>
$(function(){
  $('#openNew span').click()
})
//成功打开新页面
 
//***javascript***
<a href="http://wuliv.com" id="openNew"></a>
document.getElementById('openNew').click()
//成功打开新页面

  

使用jquery来触发a标签点击跳转时,需在a标签插入一个子标签,然后触发子标签的点击实现a标签的跳转(有点绕)

$("#openNew")得到的是一个jquery的对象,jquery本身对该对象的一些属性进行了封装,所以会导致click失效;而使用js对象 document.getElementById("a") 则不会存在该问题

onclick()也可以触发事件,但是onclick跟click不同;
onclick触发的是方法,而click先触发按钮的点击事件,再触发方法。
如果该对象没有绑定onclick方法则无法被触发,而click没有绑定方法也可以触发。

弹出新窗口失败的原因:

使用window.open(),但是定义了窗口名,也就是在打开窗口传入name参数,因为window.open只能打开唯一的窗口名为name的窗口页面,如果同名,则无法打开。
解决方案:window.open()不定义窗口名

使用了异步请求,通过ajax向服务器请求数据,在请求完成后再打开新窗口。因为异步请求存在延时,浏览器会认为不是用户触发的操作。
解决方案:
2.1 ajax请求设置成同步的方式
如果使用了jQuery中的ajax方法做异步请求,则可以配置 async: false, 使请求方式变为同步。

2.2 vue2.0采用的axios进行数据请求,axios没有同步请求的设置,都是异步的。

在axios请求之前先打开一个空白的新窗口

var newPage = window.open() 打开的空白页上有标题,显示的是“无标题”
window.open('about:blank') 标题上显示的是'about:blank'
接着在axios的then回调里写入要打开的url
window.open('about:blank')

至此解决了浏览器阻止新窗口弹窗问题。
一个小问题,有这么多道道,外面世界太浮躁,还是安心写代码来的舒畅些。

点赞
收藏
评论区
推荐文章
徐小夕 徐小夕
4年前
《前端实战总结》如何在不刷新页面的情况下改变URL
由于公司最近有个需求是想让我们的get请求的参数都直接显示在浏览器url上,这样我们就可以直接通过复制url来显示对应的界面数据了。背景介绍由于我们常用的http请求一般是基于XHR对象的实现或者fetch实现,这种请求操作并不会触发浏览器url的变化,这样虽然也能正常请求数据并渲染到页面,但是如果用户在当前页面操作了某个get请求并得到了某条数据,想
陈发良 陈发良
4年前
工作问题记录总结2021--1
1问题:在ios设备,怎么判断玩家是从通过浏览器进入,还是通过主屏幕点击进来的?解决方法:(不刷新页面,但是改变页面的url地址)1用户在第一次使用浏览器进入的时候,给url地址添加标记,2当用户添加到主屏幕的时候,就多了标记3网页打开的时候,判断是否有这个标记,如果有这个标记,就是通过主屏幕进入,如果没有这个标记,就是通过浏览器进入主
Wesley13 Wesley13
3年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
马丁路德 马丁路德
4年前
在浏览器输入 URL到页面展示中间发生了什么?
这个问题是前端的经典问题,从这个问题出发我们可以从根本上了解如何解决性能优化问题首先我们可以在开头大概了解下在浏览器输入URL到页面展示,中间有哪些步骤:用户从浏览器进程里输入请求信息网络发起URL请求服务器响应URL请求之后,浏览器进程就要开始准备渲染进程了渲染进程准备好之后,需要先向渲染进程提交页面数据,我
李异 李异
2年前
推荐一个可以白嫖chatgpt的浏览器插件,无门槛使用
如果能在打开浏览器的时候就能使用chatgpt,那可以说是再方便不过了。前段时间我就发现我正在使用的WeTab新标签页刚好有了这个新功能,可以在新标签页上直接用gpt。
Stella981 Stella981
3年前
Node.js 简单学习
明白JavaScript语言,你就会用Node.js了。最常见的运行JavaScript语言的地方就是用户的浏览器,几乎所有的浏览器上都有个JavaScript引擎,这个引擎负责运行在页面中嵌入的JavaScript代码。代码是在用户的浏览器上运行的,用户那头叫前端(Frontend),服务器这头叫后端(Backend)。Node.js
Wesley13 Wesley13
3年前
JAVA拦截器,JAVA返回结果跨域问题解决
遇到的问题:通过拦截器做权限控制,没有权限时返回了json值,结果前端请求时提示跨域了备注:我的前端站点和后端站点不是一个地址报错1:AccesstoXMLHttpRequestat'http://localhost:8089/appcicd/appinfo/getappinfos'fromorigi
Wesley13 Wesley13
3年前
JS实现下载的常用方案
如何使用JS实现异步下载吗?即:既能实现下载又不刷新页面。这时我们常常会想到使用ajax,但是由于ajax接受的response始终是字符串,因此并不能使用ajax来实现下载功能。常见是新建下载的方法为1,a标签2,url跳转,3,提交表单,其中a标签体验好些,其他两个会打开一个新标签再下载再关闭新标签,整个过程让人感觉眼花缭
Stella981 Stella981
3年前
AJAX学习笔记(五、AJAX+JSON与Servlet前后端交互)
前后端分离实现前后端分离的好处就不用多说了,前后端那么JavaWeb项目前后端分离是怎么实现的呢?1.浏览器发送请求2.直接到达html页面(前端控制路由与渲染页面,整个项目开发的权重前移)3.html页面负责调用服务端接口产生数据(通过ajax等等,后台返回json格式数据,json数据格式因为简洁高效而取代xml)
Stella981 Stella981
3年前
Mac快捷键以及谷歌浏览器快捷键
分为通用快捷键和谷歌浏览器下快捷键,常用的已做加粗。1\.标签页和窗口快捷键⌘N打开新窗口。⌘T打开新标签页。⌘ShiftN在隐身模式下打开新窗口。按 ⌘O,然后选择文件。在Chrome浏览器中打开计算机中的文件。按住 ⌘ 的同时点击链接。或用鼠标中键(或鼠标滚轮)点击链接。从后台在新标签页
李异 李异
2年前
这4款插件让你的Chrome和edge浏览器更好用,提升你的使用体验
浏览器是大多数人每天都要打交道的东西,使用了这么久的浏览器,用过的插件也有不少。纵观我使用过的插件,给大家推荐4个我平时用得最多,我也猜想是大家都比较需要的功能的插件。一、Wetab新标签页平时我们一打开浏览器见到的就是新标签页,一个好看且方
滞光索引
滞光索引
Lv1
若是你一贫如洗我能不能是你的最后行李
文章
5
粉丝
0
获赞
0