【前端】Window.open打不开网页

已于 2023-10-23 17:18:24 修改
阅读量3k 收藏 2
点赞数 1
文章标签： 前端
于 2023-10-23 17:17:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cyrios_ykx/article/details/133994588
版权

📖 背景

        项目部署到生产环境以后，当我需要打开后端返回的url时，却发现打不开了，看了一下URL的开头，原来是http。由于线上是HTTPS的页面，所以加上s就可以正常打开了，但是这是为什么呢？

⭐️ 解答

        这是由于现代浏览器的安全策略造成的。

        许多现代浏览器都实施了一个策略，即从HTTPS页面禁止打开不安全的HTTP页面。这是因为HTTPS是安全的，而HTTP是不安全的，所以从HTTPS页面打开HTTP页面可能会导致安全问题。

        例如，如果你的网站是HTTPS，并且你试图使用window.open()打开一个HTTP链接，这可能会被浏览器阻止，因为这被视为一个安全风险。

        如果你能控制你试图打开的链接，你可以尝试将其升级到HTTPS，这样就可以从HTTPS页面安全地打开它了。如果你不能控制这个链接，你可能需要考虑其他的解决方案，比如在用户点击链接时显示一个警告，告诉他们他们将要离开一个安全的网站并进入一个不安全的网站。

        所以这也是为什么很多网站在你点击链接要跳转到其他页面时，会产生一个中间页面，并对你进行提醒的缘故了，就是为了能够让你的跳转行为产生在用户事件里。

🦀️ 延伸

直接打开网址没问题，通过超链接或window.open打开报错：The HTTP request is not acceptable for the requested resou-CSDN博客

window.open 打开新页面失效_window.open不打开新页面-CSDN博客

雪糕K
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
window.open详解（打开新窗口、脱离当前浏览器窗口打开新窗口）
日常笔记/总结/系列知识梳理
06-09 2万+
语法 window.open(URL,name,features,replace) 参数 描述 URL 字符串（可选），新窗口中要显示的地址 name 字符串（可选），打开窗口的方式，类似a标签tartget属性：_blank,_parent,_self,_top features 字符串（可选），申明新窗口的显示特征，见下表 replace 布尔值（可选），true - URL 替换浏览历史中的当前条目；false - URL 在浏览历史中创建新的条目 窗口特征（Feat
window.open 打开新页面失效
MissXu666的博客
02-25 9040
原因：浏览器出于安全的考虑，会拦截掉非用户操作打开的新页面；实际上，在异步的方法中以及非用户操作打开的新页面都会被拦截（不同浏览器不同版本表现不同，不是所有情况都会被拦截，但是任然需要做兼容处理）在开发h5项目的时候 经常需要使用window.open 来打开新页面，但有时会出现失效的情况。在接口请求完成后，根据返回的结果调用window.open 失效。交互上的小修改，这样写需要用户手动确定才会跳转。2、 使用a标签进行跳转。
window.open(“.html“,“_blank“) 执行是下载，并没有打开新窗口显示html
最新发布
weixin_40466351的博客
06-07 446
如果你的 .html 文件被下载而不是在新窗口中打开，那可能是因为服务器的响应头设置了 Content-Disposition: attachment，这会导致浏览器把响应的内容作为一个文件下载。如果你有权限修改服务器的设置，你可以尝试修改响应头，把 Content-Disposition 设置为 inline。这会让浏览器在新窗口中直接显示 .html 文件的内容，而不是下载文件。你可以尝试使用 AJAX 请求 .html 文件的内容，然后在新窗口中显示这个内容。
<JavaScript>window对象学习（二）window.open()、close()方法，以及有时只能打开新标签页而无法打开新窗口的原因
weixin_45797022的博客
03-26 1426
window.open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。 方法格式： window.open(URL,Name, Configuration) URL 要新打开页面的URL，如果没有指定URL，打开一个新的空白窗口 Name 为新打开窗口的名字，可以通过此名字获取该窗口对象，当然新打开窗口的名字除了可以是自定义的值以外，还可以是以下几个值，与超链接a的target属性值相...
window.open跳转页面，之前打开的页面不再打开重复的新窗口
weixin_40992252的博客
04-17 464
已有窗口不再重新打开: window.open(url,url)会打开新窗口 : window.open(url)
js通过url下载文件（不打开新页面）
jojo1001的博客
10-02 4390
js通过url下载文件，不打开新页面
window.open()详解
weixin_33712881的博客
06-30 844
window对象用法：1. open方法　　语法格式：window.open(URL,窗口名称,窗口风格)　　功能：打开一个新的窗口，并在窗口中装载指定URL地址的网页。　　说明：open方法用于打开一个新的浏览器窗口，并在新窗口中装入一个指定的URL地址；open方法在打开一个新的浏览器窗口时，还可以指定窗口的名称(第二个参数)；open方法在打开一个新的浏览器窗口时，还可以指定窗口的风格(第三...
window.open()方法详解
m0_50015961的博客
12-15 2491
转发链接：https://www.cnblogs.com/xsatc5211314/p/javascript.html。为避免弹出的2个窗口覆盖，用top和left控制一下弹出的位置不要相互覆盖即可。上面的例子都包含两个窗口，一个是主窗口，另一个是弹出的小窗口。通过下面的例子，你可以在一个页面内完成上面的效果。解释：这里定义了一个函数openwin(), 函数内容就是打开一个窗口。注意：2个窗口的name(newwindow与 newwindow2)不要相同，或者干脆全部为空。注意：使用的"#"是虚连接。
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
10-26
主要介绍了javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法即无法再次打开窗口、第二次打开不了,需要的朋友可以参考下
前端window.open实现激活而非打开的功能
12-22
扩展window.open方法，使得window.open时针对相同的URL地址非打开新窗口，而是仅仅激活已存在窗口，另外，此激活不会刷新页面，不会丢失页面上已存在的数据
window.open参数详解附实例
09-05
此外，虽然`window.open()` 在后台开发中仍有可能使用，但在前端开发中，考虑到用户体验，通常会避免使用弹出窗口，转而采用模态对话框（modal dialogs）或者其他更友好的用户界面设计。这些方法可以在不离开当前...
window.open最大化问题
11-13
Window.open 最大化问题解决方案 Window.open 是 JavaScript 中的一个方法，用于打开新的浏览器窗口。然而，在实际应用中，我们经常需要将弹出的窗口最大化，以便更好地展示内容。在本文中，我们将探讨如何使用 ...
js中的window.open返回object的错误的解决方法
01-19
解决window.open后返回object的错误 代码如下:<a>window.open()</a> 只在js的外层加上一个void不带返回参数的声明. 顺便在这里将window.open函数的参数使用也列出来： window.open函数参数列表 window = object.open...
window.open打开页面居中显示的示例代码
12-10
在JavaScript编程中，`window.open()` 是一个非常实用的函数，用于在浏览器中打开新的窗口或者标签页。这个函数在Web开发中常用于创建新窗口、弹窗等场景，尤其在用户交互和导航中占据重要地位。在本例中，我们将...
window.open在新窗口打开页面时被浏览器屏蔽的解决方法
我的米饭
03-21 1438
使用 window.open() 方法打开新窗口会被浏览器拦截，可以绕开这个拦截机制，利用异步调用并使用变量后赋值url的方法，代码如下： $.ajax({ url:'your url', type: 'get', success: (data, status, xhr) => { // 新建变量，实例化window.open，然后再赋值url const _window = window.open() _window.location.href = 'your url' } })
Window的Open方法，弹窗的特征【超详细篇】
Jin_Xiang123的博客
01-01 4507
本篇文章主要介绍在在JavaScript中window的OPen方法，弹窗的特征以及部分理论知识 在JavaScript中，window是一个全局对象，表示当前浏览器窗口或标签页。它包含了浏览器提供的许多方法和属性，用于操作窗口、文档和浏览器环境。可以通过window对象来访问和操作浏览器窗口的属性和方法，例如等。此外，window对象也是全局作用域的顶层对象，因此全局定义的变量和函数实际上成为了window对象的属性和方法。方法/属性描述弹出警告框，显示指定的消息弹出确认框，显示指定的消息
前端 window.open带入请求头
04-20
在前端中，使用`window.open`方法可以打开一个新的浏览器窗口或者标签页。然而，`window.open`方法本身并不提供直接设置请求头的功能。请求头是在发送HTTP请求时由浏览器自动添加的。 如果你想在新打开的窗口或标签页中发送带有特定请求头的请求，可以考虑使用`XMLHttpRequest`对象或者`fetch`函数来发送请求。这两种方式都允许你自定义请求头。 下面是一个使用`XMLHttpRequest`对象发送带有请求头的GET请求的示例代码： ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://example.com', true); xhr.setRequestHeader('Custom-Header', 'header-value'); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { // 请求成功处理逻辑 } }; xhr.send(); ``` 在上面的代码中，我们通过`setRequestHeader`方法设置了一个名为"Custom-Header"的自定义请求头，并将其值设置为"header-value"。你可以根据自己的需求添加更多的请求头。 使用`fetch`函数发送带有请求头的GET请求的示例代码如下： ```javascript fetch('http://example.com', { headers: { 'Custom-Header': 'header-value' } }) .then(function(response) { if (response.ok) { // 请求成功处理逻辑 } }) .catch(function(error) { // 请求失败处理逻辑 }); ``` 在上面的代码中，我们通过`headers`选项设置了一个名为"Custom-Header"的自定义请求头，并将其值设置为"header-value"。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值