window.open新开页时页面访问不了问题

最新推荐文章于 2025-10-02 18:56:35 发布
原创 最新推荐文章于 2025-10-02 18:56:35 发布 · 3.7k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#window.open() #403 #referrer

本文探讨了在使用window.open方法进行跨域跳转时遇到的403Forbidden等问题，解析了浏览器referrer策略对跨域请求的影响，并提供了解决方案，即在index.html头部加入特定的meta标签。

window.open新开页时页面访问不了问题

当项目中需要新开页跳转到其他网站时，最常用的方法就是使用window.open(url)来实现，最近在项目中，使用window.open()方法新开页跳转时，有些网站可以正常访问，有些则访问不了，会出现诸如：403 Forbidden、The HTTP request is not acceptable for the requested resource.等报错问题，但是单独去访问这些地址又是可以正常访问的。

问题原因：

当点击访问页面中外链地址时，会产生一个http请求（用于获取外链地址内容），此时出于安全策略（一些用户信息或登录信息会通过url传递），浏览器会在请求头中添加一个referrer，用来表示当前请求是从哪个页面跳转来的，也就是访问来源。当外链网站对访问做判断时，于是会出现诸如403 Forbidden、The HTTP request is not acceptable for the requested resource.问题。

解决方法：

在项目的index.html的<head>中加入如下<meta>代码：

// index.html
<meta name="referrer" content="no-referrer" />
window.open() 被拦截的问题解决
oscar999的专栏
04-29 1万+
某些浏览器（比如Chrome）出于安全和体验的考虑，会禁止直接在JS中使用 window.open(url) 打开新的窗口。但是如果使用 `window.open(url,'_self') ` 改变当前窗口是允许的。 禁止直接打开的原因就是非用户操作产生的新弹出窗口，会被认为这可能是一个广告，所以禁止了这种行为。
window.open()跳转新页面访问不了，但是单独访问这些地址则正常
m0_60370017的博客
02-22 3608
window.open()跳转到其他网站时，有些网站可以正常访问，有些则访问不了，出现HTTP ERROR 403报错问题，但是单独去访问这些地址又是可以正常访问的。
window.open速记
最新发布
askein的博客
10-02 228
用来打开一个新的浏览器窗口或标签，也可用来加载指定 URL。
window.open跳转的地址打不开，重新访问就可以打开问题解决
qq_31699161的博客
04-09 2745
在新的浏览器页签打开第三方页面时，显示页面未找到，但是浏览器单独访问这个第三方地址，却可以正常打开。1、如果你想要使用window.open方法打开一个新窗口，但是用户设置了浏览器，使得弹窗被拦截，那么你可以考虑使用window.location.href来代替window.open。使用此方法，通过先打开一个空的浏览器窗口，然后用location.href方法替代window.open设置重定向地址的方式，可以解决此类问题。
window.open()新开页签被拦截解决方案
weixin_57415697的博客
06-25 1245
在需要接口返回信息后进行跳转的逻辑处理中,如果响应时间过长会导致浏览器将弹出框默认为垃圾网站, 但当前页面不牵扯新开页签的情况,浏览器不会进行限制跳转,此时若无法优化接口响应时间, 那就先进行设置一个页面配置路由,先在此页面进行请求接口, 响应成功后在此页面利用route.push进行跳转。在 Vue 中使用 window.open(href.href, '_blank') 打开一个新窗口时，如果浏览器的弹出窗口阻止器（pop-up blocker）处于活动状态，可能会阻止弹出新窗口。
window.open 打开新页面失效
MissXu666的博客
02-25 1万+
原因：浏览器出于安全的考虑，会拦截掉非用户操作打开的新页面；实际上，在异步的方法中以及非用户操作打开的新页面都会被拦截（不同浏览器不同版本表现不同，不是所有情况都会被拦截，但是任然需要做兼容处理）在开发h5项目的时候 经常需要使用window.open 来打开新页面，但有时会出现失效的情况。在接口请求完成后，根据返回的结果调用window.open 失效。交互上的小修改，这样写需要用户手动确定才会跳转。2、 使用a标签进行跳转。
javascript新窗口打开链接window.open()被阻拦的解决办法
weixin_34221775的博客
06-23 198
场景是ajax提交，比较后端效验数据，需要用户登录，提示后并需要新窗口打开登录的链接，使用window.open(url);往往会被浏览器认为是广告而被拦截。 data.url是ajax返回的链接地址 1 //window.open(data.url); #新窗口打开链接，浏览器会当成广告阻截，所以改换以下方式 ： 2 3 var strA=document.createE...
解决js中window.open弹出的是上次的缓存页面问题
10-26
然而，有时候我们可能会遇到一个问题：当使用 `window.open()` 打开一个新的URL时，浏览器显示的并不是最新版本的页面，而是之前访问过的缓存版本。这可能对用户体验造成困扰，尤其是当页面内容需要实时更新时。本文...
window.open的页面如何刷新(父页面)上层页面
09-05
在网页开发中，`window.open` 是一个常用的 JavaScript 函数，用于在新的浏览器窗口中打开一个新的页面或 URL。然而，在一些交互场景下，比如子页面（由 `window.open` 创建的页面）需要与父页面（打开子页面的那个...
javascript 打开页面window.location和window.open的区别.docx
01-13
- **window.open** 更适合用于打开新的浏览器窗口或标签页，特别是在需要弹出新窗口的情况下。 #### 五、安全性和隐私考虑 - 使用 `window.open` 打开新窗口可能会触发浏览器的安全策略，尤其是当涉及到跨域请求时...
webpack解决使用window.open方法打开history路由页面提示404的问题
qq_42750608的博客
10-25 786
webpack解决使用window.open方法打开history路由页面提示404的问题
关于window.open无法打开新窗口的解决方案
博哥的二进制世界
05-14 8013
关于window.open无法打开新窗口的解决方案问题描述解决方案 问题描述 通常有时候我们会在函数判断中，在没有用户交互的情况下执行window.open打开新窗口，但是现在这样的执行方式会被浏览器拦截，因为没有用户交互，浏览器拦截用户无感知下的自动开启新窗口。 解决方案 如果想通过window.open打开新窗口，我们必须和用户进行交互，比如让用户点击按钮，在按钮的点击事件中再执行window.open，这样浏览器才不会拦截这一代码 this.$alert('是否弹屏显示客户列表', '弹屏提示', {
window.open(url)打开链接被浏览器拦截解决方案
热门推荐
RainSorrow的博客
03-08 7万+
浏览器为了维护用户安全和体验，禁止在JS中直接使用window.open(url)来打开新的链接（window.open(url,”_self”)改变当前的窗口是可以生效的）。下面采用几种变通方法解决： 1.表单提交的方式 var form = document.createElement('form'); form.action = 'www.baidu.com?id=1'; for...
【前端】Window.open打不开网页
Cyrios_ykx的博客
10-23 4056
HTTP => HTTPS
js windows.open 不能显示页面，刷新后方可显示的解决办法
潇湘博客
03-26 4544
js windows.open 不能显示页面，刷新后方可显示的解决办法 function Print(){ window.open(myencode(pdf/php.pdf.php?key=),_blank) ;     } 这个方法打开打印页面的时候，不能显示网页，提示链接错误，刷新后又可显示页面了。本人觉得这是ie的bug.而用" target="_
window.open和vue router新开页面
鹤渺的星球
05-18 1万+
打开新页面，并实现在新开页面中携带参数，可以使用 URLSearchParams 对象，进行参数的拼接和解析，vue router跳转新页面和window.open都可以，三种方式适应于不同场景。以上是几种常在开发中使用的几种跳转和新开页面的方式，关于router，在后续里更深入学习。
解决VUE项目window.open()方法打包部署上线报错404
李十三的博客
09-25 2273
我的项目是部署在服务器的指定目录下，并且项目的路由模式是history模式，所以我需要在vue.config中配置publicpath和在路由中配置base,配置为相同的字符串，并告诉后端ng映射到我设置的这个字符串上.，此时访问地址可以显示项目页面,但是部分window.open()方法所跳转到的页面会报错404.（window.open方法没自动带上'/ABC/'，而是直接打开了'/xxxx/xxxx'，相当于直接访问根目录，因为我的资源放在'/ABC/目录下'，所以是访问不到的）
window.open 打开是空白页面
nailwl
12-16 8497
众所周知，FireFox为了支持web标准，在1.1版以后就取消了对模式对话框的支持。即：window.showModalDialog()。但是我们有时在制作网页的时候想增强用户体验性，想使用这个功能怎么办？我们先来分析一下实现模式对话框的原理，我们在IE的模式对话框下无论点父窗口的什么地方，focus（焦点）总是回到了子窗口上面。那么在FireFox下我们将focus总是设置在子窗口上不就行了嘛
Ant Design和React，在页面中使用window.open(“XXX")打开页面，迅速关闭后页面卡死的问题解决
qq_35639030的博客
03-20 3124
问题描述：在页面A中window.open("XXX")打开一个页面B，在页面B没有请求完接口时，迅速关闭页面B，导致页面A卡死。页面B在关闭时会向页面A发送消息，让页面A刷新页面。 浏览器：Google 解决方案： 将页面B嵌套在页面C中，页面C只有iframe。这样关闭就没有问题了。 具体实现： 话不多说，上代码。 页面C代码 import React from 'react'...
window.open打开vue页面
05-31
### 在 Vue 中使用 `window.open` 打开新页面的方法与最佳实践 在 Vue 项目中，`window.open` 是一种常见的打开新页面的方式。以下将详细介绍如何正确使用 `window.open` 方法，并结合引用内容提供最佳实践。 ####...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值