https网站为什么不能引用http资源？

发布日期：2021-06-02 21:23:18   浏览量：

其他用法

这个小技巧同样适用于 CSS

.omg { background: url(//test/kittyonadolphin.gif); }

相对协议, 如果你的网站同时准备了https资源和http资源, 那么使用相对协议可以实现根据当前网站的协议,浏览器自行通过https还是http发送请求，使用资源协议自适配，比如，当前为https页面，那么就是https资源，如果是http页面，那么就是http资源。具体方法超简单：将URL的协议(http,https去掉)

相对协议：应用场景

浏览器默认是不允许在 https 里面引用 http 资源的，一般都会弹出提示框。

用户确认后才会继续加载，用户体验非常差。

而且如果在一个 https 页面里动态的引入 http 资源，比如引入一个 js 文件，会被直接 block 掉的。Chrome v21 之后，在 SSL 加密页面 embed 非 SSL 的 Flash 资源也会被默默的屏蔽掉，只留下一句 console 报告。

解决方式：相对协议

如果你的网站同时准备了 https 资源和 http 资源，那么，可以使用相对协议可以帮助你实现当网站引入的都是 http 资源，网站域名更换为 https 后的无缝切换。

具体使用方法为：

简而言之，就是将URL的协议(http、https)去掉，只保留//及后面的内容。这样，在使用https的网站中，浏览器会通过https请求URL，否则就通过http发送请求。

附注：如果是浏览本地文件，浏览器通过file://协议发送请求，导致请求失败，因此本地测试最好是搭建一个本地服务器。

HTML5 Boilerplate 使用相对协议请求 Google CDN 中的 jQuery ，使用方式为：

!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))

上面的例子中除了引用 Google CDN 中的文件外，还添加了一个本地 jQuery 链接，以便连接 Google CDN 失败后，使用本地副本。代码判断过程为：

首先检查 jquery 对象是否存在，如果存在，证明 Google CDN 运行正常;

如果不存在，则说明连接 Google CDN 失败，引入本地 jQuery 库。

本猿认为，在国内相对特殊的网络环境中，Google CDN 请求缓慢甚至失败常有，因此不推荐引用 Google CDN 托管的各种库。即便有备用链接，浏览器还是会多次尝试请求 Google CDN 中的文件，这个过程可谓漫长，严重影响页面载入速度。

使用 iframe

使用 iframe 的方式引入 http 资源，比如在 https 里面播放优酷的视频，我们可以先在一个 http 的页面里播放优酷视频，然后将这个页面嵌入到 https 页面里就可以了。

另外一个典型的例子是在 https 页面里通过 Ajax 的方式请求 http 资源，Chrome 是不允许直接 Ajax 请求 http 的。如果两个页面的内容都可以控制的话，当前窗口可以 iframe 窗口进行通信。

其他用法

这个小技巧同样适用于 CSS ：

.omg { background: url(//websbestgifs.net/kittyonadolphin.gif); }

https网站中无法引用百度地图等http资源

关于网站安装了证书，使用https协议，导致无法引用http资源，这种问题是经常发生的，那么是什么原因导致的呢?小编也差了好多资料才解决了，和大家分享一下，请大家多多指教。

如果你的网站是https的，那么下边的资源也必须是https的，否则那是不行的。

我是百度地图遇到的这个问题，开始的链接是这样子的：http://api.map.baidu.com/api?v=2.0&ak=我的密钥;打开页面什么都没有，F12查看才知道报错了，之后差了资料，查到两个方法可以解决。

方法一：

改成https，并且需要在最后边加一个特殊字段 s=1，如下：

https://api.map.baidu.com/api?v=2.0&ak=我的秘钥&s=1;

方法二：

自动将http的不安全请求升级为https。

最近一个项目是由html, css, javascript, jquery工具编写的一款简单的网页游戏——2048。 最终项目文件分别为index.html,2048.css,main2048.js,support2048.js,animation2048.js 最终代码在被提交到GitHub之后将进行git page部署，以方便预览运行效果。该项目在本地VsCode中运行正常，但是在部署到git page上时，所有js文件均未加载，只有html文件与css文件加载成功，功能无法正常运行。

为什么http的内容不能在https内使用?

将所有js代码放入html文件的内置script标签内，再次运行。 运行结果依旧如上，但出现了错误提示：$符号为undefined，由此可知，js未能加载成功的原因是jquery库未能成功导入。

于是对jquery导入语句进行了检查：

之前有看到过，建议在国内导入jquery库的话不要使用Google的链接，容易不稳定。但是该项目采用的是Microsoft提供的jquery链接，应该不会有链接不稳定这一类情况发生。

后来在同事的指点下，将该语句中的http修改为https后，发现jquery库可以正确导入了，js文件也能够正确的加载。 修改后的语句为：

深入思考

第一句jquery导入语句是从一个还算知名的教程网站上看到的，而且在VsCode本地也是可以运行的，但为什么在GitHub上部署的时候却会有协议上的问题呢?于是查找了很多相关资料，希望能够弄明白这个问题。