axios window.open 拦截处理方法

最新推荐文章于 2024-12-29 22:38:25 发布
原创 最新推荐文章于 2024-12-29 22:38:25 发布 · 3.8k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种解决使用axios发起请求后自动打开网页被浏览器拦截的方法。通过预先打开一个空白页面并利用location.href属性更新其URL，可以有效避免被现代浏览器的安全策略所阻止。

做项目的时候，axios请求成功后会在新窗口打开一个网页。

直接用window.open(url)被谷歌浏览器给拦截住了。

解决方法：

在axios发送之前就打开一个空白的新窗口

var newPage = window.open()

如果这样写，打开的空白页上有标题，显示的是“无标题”

window.open('about:blank') 这样的话，标题上显示的是'about:blank'

然后在axios的then回调里写入打开的url的地址
newPage.location.href = 'url'

这样就解决了浏览器自动拦截的问题了

Axios请求 window.open本拦截直接走 catch方法 处理（IOS系统处理）
Oblivion的博客
12-20 1877
按照惯例，我们得先找一下 有没有已经解决的方法 然后 一顿搜索，发现全都是 Ctrl + C,Ctrl + V的 博客， 统统都是 如下方法： 连标点符号都没变，嘿，mdzz //在axios发送之前就打开一个空白的新窗口 var newPage = window.open() //如果这样写，打开的空白页上有标题，显示的是“无标题” window.open('about:blank') 这...
ajax请求回调后window.open()弹窗被拦截解决办法
qq_36217060的博客
04-23 970
代码示例:这里需要注意，现在的浏览器默认设置是，window.open()方法只能在click事件的程序线程中执行。 也就是必须触发click事件，如果事件中用ajax之类，就必须是同步模式。让代码都在同一个线程中执行。 异步模式会开启一个新的线程，就不能执行window.open()了 如果是这种模拟器方式打开新窗口，代码示例： 即使ajax请求设置了同步，会产生的效果:QQ浏览器正常打开，...
解决window.open被拦截问题
aishuo5474的博客
09-13 189
最近在项目中有一个在浏览器中新开一个窗口的需求，如果不需要做任何的判断，只是直接新开窗口的话，用a标签即可。 但是如果需要做一些判断再新开一个窗口的话，就不能使用a标签了。window.open确实可以打开一个新窗口，但会被浏览器当作广告被拦截，需要手动去解除拦截。 在网上搜索了很多，但并没有一个可以解决的。 于是，使用了form提交新开窗口的黑科技 demo1 <h...
window.open被拦截问题及解决方法
RubyLinT的博客
10-26 727
最近做一个项目，遇到window.open()被拦截的情况，于是上网搜了大半天解决方法，最后只有一个好用的： 就是把ajax请求改成同步的(async:false)
window.open(url)打开链接被浏览器拦截解决方案
恍若c的博客
08-24 1844
H5下载发票是跳一个后端返回的链接，但直接用window.open有些会被浏览器（Safari）拦截 在axios中进行window.open会被浏览器拦截 法1：但用户自己点击的链接不会，可以创建a标签模拟用户点击； 法2：在axios之前就window.open xx.addEventListener(‘click‘, function () { // 打开页面，此处最好使用提示页面 var newWin = window.open(‘loading .
window.open ios不执行
06-23
我们正在处理一个关于在iOSSafari浏览器中`window.open`方法不执行的问题。根据引用内容，这个问题主要是由于Safari的安全机制导致的：它禁止在非用户直接交互（如异步回调）中执行`window.open`，以防止恶意弹窗。...
@click可不可以使用"window.open('{% url '' %}？
最新发布
11-18
我们正在讨论的是在Vue的模板中使用`@click`事件绑定，并尝试在事件处理中调用`window.open`方法。引用的内容中提到了几种不同的情况： 1. 引用[1]指出：在Vue3中，如果直接在`@click`中写`window.open(alipayUrl)`...
vue一个methods方法，调用两个后台接口，根据两个接口返回的url，通过window.open打开多个窗口
12-07
在Vue中，你可以使用`methods`方法来调用多...请注意，`window.open`方法在某些浏览器中可能会被拦截，特别是如果它不是用户直接触发的操作。为了避免这种情况，确保这个方法是在用户交互事件（如点击事件）中调用的。
(function () { var open = window.XMLHttpRequest.prototype.open; window.XMLHttpRequest.prototype.open = function (method, url, async) { if (url.indexOf("token") != -1) { debugger; } return open.apply(this, arguments); };})();
04-01
// 调用原始 send 方法继续处理请求 }; })(); ``` 上述代码实现了以下几个功能： - **存储请求上下文**：在 `open` 方法中保存了请求的目标地址 (`_url`) 和 HTTP 方法 (`_method`)。 - **检测 token 参数的存在...
关于window.open 被浏览器拦截解决方案
weixin_42498594的博客
12-29 1651
直接绑定到用户事件回调是最简单的方式，但局限性较大，无法适应复杂的异步场景。先打开空白窗口后填充 URL可以解决拦截问题，但用户体验不佳。最优方案是通过提示用户手动跳转或检测的返回值并提供兜底策略，从而确保用户体验和业务逻辑的完整性。链接：https://juejin.cn/post/7414305106825019402。
解决JS打开新窗口被浏览器拦截的问题
iKun
08-23 4871
今天有一个需求是当用户需要获取到自己上传的资源链接，然后点击查看跳转到对应的资源挂载点。突然发现使用JS的window.oepn()操作会导致浏览器拦截。 原来当window.open为用户触发事件内部或者加载时，不会被拦截，一旦将弹出代码移动到一段异步代码内部，就会被拦截。 因此我们通过ajax必须设置成同步模式即可解决。 $.ajax({ url:url, ...
后台管理（四）：对axios网络请求结果的拦截处理
stonezry的专栏
06-06 587
我们之前在处理token的时候，在axios里面进行的拦截设置，可以每次请求都在头部携带token信息，这样就不用每次请求的时候都要写一遍了。 // axios请求拦截 axios.interceptors.request.use(config => { config.headers.Authorization = window.sessionStorage.getItem('admin_token') return config }) 那么问题来了，token是有时效的，如果你有看我的后台
使用Window.open()跳转页面在ios下失效问题
qq_62809806的博客
04-03 4212
使用Window.open()跳转页面在苹果系统ios下失效问题
window.open无法下载问题及其axios解决下载问题的方法，附hutool工具导出导入Excel的功能
eyouhs的博客
03-02 2559
window.open无法下载问题及其axios解决下载问题的方法，附hutool工具导出导入Excel的功能
excel下载两种方式(axios和window.open)
longshao_520的博客
08-31 954
excel下载两种方式(axios和window.open)
浏览器拦截js打开新窗口
dccc43727的博客
10-09 302
最近做项目时，遇到的问题“想通过javascript在浏览器新标签页或新窗口打开一个新的页面，结果被浏览器大大无情给拦截了”业务需求：前端提交数据到后端，后端返回url，然后在新窗口打开该url。（前后端数据请求使用异步请求的方式） 自己常用的两种打开新窗口的方式 window.open() 用a标签的target="_blank"在模板中插入一个a标签，然后javascr...
vue3编程式导航如何打开新窗口实现_blank
langligelangxy的博客
07-28 2600
当然根据个人习惯，传递的参数是用path还是query{}，自己熟悉就好，路由也跟着更改就好。详情获取ID的形式也跟着改变。
史上最详细axios,读完你就全部懂了
Jack, what else can you do besides holding your little darling?
09-30 1297
使用XMLHttpRequest封装简单的ajax请求函数 1. XHR的MDN文档 https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest 2. XHR的理解 1). 使用XHR对象可以发送ajax请求与服务端进行交互 2). 前端可以获取数据,而无需让整个页面进行刷新 3). 只更新Web页面的局部,而不影响用户的操作 3. 一般http请求与ajax请求的区别 1). ajax请求是一种特别的http请求 2)
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值