chrome拦截window.open弹窗问题的两种解决方式
来源:互联网 发布:电脑绘图软件 编辑:程序博客网 时间:2024/06/06 05:27
chrome拦截弹窗问题的两种解决方式
在前端编写中,可能会用到window.open
,<a target="_blank">
等方式来在新的tab打开url。但会发现,有些情况下新打开的tab页会被chrome拦截了:
出现这种情况,很有可能是因为:这些调用不是由用户行为(如:点击)触发的。
一种典型场景就是:点击按钮,触发ajax请求,然后在ajax的回调中,打开新的tab页。这里,打开新tab页的操作是在回调的上下文中,并不在点击事件中,尝试打开tab页就会被拦截。
以ajax导出pdf文件
为例,
$("#export_button").click(function(){ ... $.ajax({ url : 'generateExportPdfFileURl', ...... success : function(pdfFileUrl) { openInNewTab(pdfFileUrl); } ...... });});/*openInNewTab原始实现:被拦截*/var openInNewTab = function(url) { var a = document.createElement("a"); a.setAttribute("href", url); a.setAttribute("target", "testNewWindow"); document.body.appendChild(a); a.click();}
下面介绍通过增加用户行为触发和打开-更新多步操作两种解决方法。
增加用户行为触发
ajax回调中打开新窗口被拦,是因为回调中上下文已不是用户行为了,因此,可以通过在回调增加用户提示,由用户点击确认触发打开url:
/*openInNewTab实现:增加用户行为触发*/var openInNewTab = function(url) { MsgUtil.alertPrompt("导出文件已生成",function () { var a = document.createElement("a"); a.setAttribute("href", url); a.setAttribute("target", "testNewWindow"); document.body.appendChild(a); a.click(); }, "打开");}//MsgUtil.alertPrmpt是自行实现的提示弹窗:// alertPrmpt({prompt_text}, {callbackFn}, {button_text});
打开-更新多步操作
ajax回调中打开新窗口被拦,是因为回调中上下文已不是用户行为了,另一种思路分步完成:在ajax之前打开一个新的window,然后在回调中更新window的location:
$("#export_button").click(function(){ ... openInNewTab("about:blank"); //先打开新窗口 $.ajax({ url : 'generateExportPdfFileURl', ...... success : function(pdfFileUrl) { updateNewWindowUrl(pdfFileUrl); } ...... });});//更新已打开窗口的urlfunction updateNewWindowUrl(url) { var newWindow = window.open(null, 'testNewWindow'); newWindow.location.href = url;}
以上是以click为例验证两种方法,对于window.open打开新窗口,同理。
*:将ajax设置成同步调用,应该也可以,但不推荐。
阅读全文
0 0
- chrome拦截window.open弹窗问题的两种解决方式
- 解决window.open被浏览器拦截的问题
- 异步请求后根据结果window.open方式打开新页面,浏览器拦截弹窗问题
- 解决window.open浏览器拦截的办法
- window.open()被浏览器拦截的问题
- window.open 浏览器拦截解决
- 解决弹出的窗口window.open会被chrome浏览器阻止的问题
- window.open()被拦截问题
- 处理window.open弹出框被拦截的问题
- window.open关于浏览器拦截问题
- window.open被拦截问题及解决方法
- window.open()的问题
- chrome浏览器中window.close()无效的问题的解决
- window.open() 被拦截后的分析
- window.open被浏览器拦截的解决方案
- window.open() 被拦截后的分析
- JS弹窗方式:window.open和window.showModalDialog
- 解决ie的window.open的referer丢失问题。
- AWT的布局管理器(只有例子)
- Faster-rcnn中的问题解惑
- Hadoop-2.5.0-cdh-5.3.6搭建手册
- Boosting 简介--A (small) introduction to Boosting
- kaggle titanic 机器学习流程 top30%
- chrome拦截window.open弹窗问题的两种解决方式
- Redis在windows下安装过程
- mock.js模拟数据
- TensorFlow学习笔记
- JAVA插入数据到MySql少了8小时
- Java 编码和解码
- 使用ueditor进行图片上传、保存、存入数据库
- php微信支付官方SDK简单开发
- Rinetd的端口映射