【前端】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
    评论
<JavaScript>window对象学习（二）window.open()、close()方法，以及有时只能打开新标签页而无法打开新窗口的原因
weixin_45797022的博客
03-26 1429
window.open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。 方法格式： window.open(URL,Name, Configuration) URL 要新打开页面的URL，如果没有指定URL，打开一个新的空白窗口 Name 为新打开窗口的名字，可以通过此名字获取该窗口对象，当然新打开窗口的名字除了可以是自定义的值以外，还可以是以下几个值，与超链接a的target属性值相...
window.open打开新窗口，不被拦截的方法
11-27
window.open打开新窗口，不被拦截的方法
window.open(“.html“,“_blank“) 执行是下载，并没有打开新窗口显示html
最新发布
weixin_40466351的博客
06-07 457
如果你的 .html 文件被下载而不是在新窗口中打开，那可能是因为服务器的响应头设置了 Content-Disposition: attachment，这会导致浏览器把响应的内容作为一个文件下载。如果你有权限修改服务器的设置，你可以尝试修改响应头，把 Content-Disposition 设置为 inline。这会让浏览器在新窗口中直接显示 .html 文件的内容，而不是下载文件。你可以尝试使用 AJAX 请求 .html 文件的内容，然后在新窗口中显示这个内容。
window.open 打开新页面失效
MissXu666的博客
02-25 9072
原因：浏览器出于安全的考虑，会拦截掉非用户操作打开的新页面；实际上，在异步的方法中以及非用户操作打开的新页面都会被拦截（不同浏览器不同版本表现不同，不是所有情况都会被拦截，但是任然需要做兼容处理）在开发h5项目的时候 经常需要使用window.open 来打开新页面，但有时会出现失效的情况。在接口请求完成后，根据返回的结果调用window.open 失效。交互上的小修改，这样写需要用户手动确定才会跳转。2、 使用a标签进行跳转。
JavaScript 中的 Window.open() 用法详解
孙悟空
05-30 3万+
本文介绍了如何使用Window.open()方法，列举了该方法中各个参数的含义，以及如何在当前窗口、新窗口、独立窗口打开地址
window.open用法详解
热门推荐
夕山雨的博客
08-09 7万+
目录一、window.open1. 基本语法 本文主要分两部分。第一部分详细介绍window.open的详细用法，包括它的基本语法、使用说明等。第二部分由window.open引出，我们将介绍当存在多个页面相互关联时，页面之间的通信问题。 一、window.open 1. 基本语法 ...
window.open在 ios safari中打开新页面失败
一只爱吃糖的小羊
09-29 2090
window.open在 ios safari中打开新页面失败解决办法
前端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下载不打开新窗口
littlebearGreat——宁静致远
11-30 8320
open的第二个参数是 '_self' 即可 window.open(url,'_self');
js通过url下载文件（不打开新页面）
jojo1001的博客
10-02 4397
js通过url下载文件，不打开新页面
window.open()详解
weixin_33712881的博客
06-30 850
window对象用法：1. open方法　　语法格式：window.open(URL,窗口名称,窗口风格)　　功能：打开一个新的窗口，并在窗口中装载指定URL地址的网页。　　说明：open方法用于打开一个新的浏览器窗口，并在新窗口中装入一个指定的URL地址；open方法在打开一个新的浏览器窗口时，还可以指定窗口的名称(第二个参数)；open方法在打开一个新的浏览器窗口时，还可以指定窗口的风格(第三...
window.open无法打开新窗口
a986436517的博客
07-10 4364
为什么要做这个东西 最近做一个需求，前端请求一个接口，后台生成文件以后返回文件名，前端再通过window.open下载这个文件。发现window.open有时生效有时不生效，后来查阅资料后发现浏览器出安全方面的考量，会把用户操作完页面后一段时间内的window.open视为非法操作屏蔽掉，这个时间后来经过测试大概是五秒；如果接口请求比较耗时就会导致open被屏蔽。这里封装一个函数，用户操作完页面4.5秒后请求没有完成时先执行window.open，接口请求完成后替换新窗口的url完成文件下载。如果在4.5秒
window.open 失效不弹窗问题
weixin_42608654的博客
04-13 3477
项目中的小问题： window.open 失效不弹窗问题 前言 前端大佬在忙，自己的P0已经清空，闲来无事就想去研究研究 背景及现象 前端调用wps展示数据，在wps中穿透其他业务数据。预期：新开页面展示穿透数据 排查1：F12 调试调用 window.open和top.open，控制台无报错、浏览器无新窗口打开。换window.location.href = url 生效 排查2：百度一堆，大部分是Safari、移动端调用失败的，方面错误； 但 偶然间 发现一篇文章再说，手动点击和Ajax s
前端 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、付费专栏及课程。

余额充值