资讯专栏INFORMATION COLUMN

如何在https网页中引入http资源

ChristmasBoy / 3115人阅读

摘要:建议在调试阶段用或者引入,在部署阶段用相对协议,或者直接在本地建一个服务器,以服务器的形式打开页面,就不会出现浏览器无法加载相对协议下的资源的情况了。

前几天在做一个翻译小应用的时候,发现在安卓手机端可以正常运行,而在苹果手机和谷歌浏览器中不能正常运行(可能safari和Chrome的内核都是webkit内核的原因,还是webkit内核大法好^__^),电脑端有提示不安全提示,而手机端不会有任何提示。

demo地址:https://zdaoyang.github.io/tr...

上社区寻求答案后得知,是因为github全站开启了https,而在我的html页面的head中,有一些资源是以http的形式引入的,如下图

也就是说,如果你的主站点是https的,那么里面的所有资源就必须都要以https的形式引入,不然浏览器的安全机制就会把这部分资源block掉,导致无法正常运行。

解决方案有以下几种:

将资源引入形式改成https

选择相对协议,也就是说,将头部的http/https去掉,只保留之后的部分,像这样:


这样的好处是浏览器能够根据你的网站所采用的协议来加载文件。

但是,由于“相对协议”的相对特性,对于本地文件的访问就有一个“坑”:比如,你在电脑上保存了一个 index.html 的页面,这个页面中用相对协议引用了网络上的某个外部资源,你直接用浏览器打开这个html文件是打不开的,因为你浏览本地文件时,浏览器采用的是 file: 协议,file协议无法识别//cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css这种类型的资源路径,故打不开。

建议:

在调试阶段用http或者https引入,在部署阶段用相对协议,或者直接在本地建一个服务器,以服务器的形式打开页面,就不会出现浏览器无法加载相对协议下的资源的情况了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83856.html

相关文章

  • 浏览器内核之资源加载与网络栈

    摘要:但对于很多资源,则可以利用协议减少网络负载。采用的是多进程的资源加载机制。目前大多数浏览器都有磁盘缓存机制,因为缓存机制确实能够提高网页的加载速度。 showImg(https://segmentfault.com/img/remote/1460000016215814); 微信公众号:爱写bugger的阿拉斯加如有问题或建议,请后台留言,我会尽力解决你的问题。 前言 此文章是我最近在...

    G9YH 评论0 收藏0
  • 浏览器安全机制

    摘要:书接上文浏览器之引擎本章主要讲解浏览器安全机制的网页的安全和浏览器的安全。总结浏览器的安全机制包括网页安全模型和沙箱模型其中网页安全模型就是利用了同源策略,让不同域中的网页不能相互访问,当然有好几种浏览器跨域的方法可以其相互访问。 showImg(https://segmentfault.com/img/remote/1460000016375575); 前言 此文章是我最近在看的【W...

    aikin 评论0 收藏0
  • HTTP协议详解

    摘要:协议发展协议是万维网协会和工作小组合作的结果,他们最终发布了一系列的,定义了版本。无状态是指协议对于事务处理没有记忆能力。来说说无状态是一个无状态协议,这意味着每个请求都是独立的。 什么是HTTP协议 引自Wikipediahttps://en.wikipedia.org/wiki...showImg(https://segmentfault.com/img/bVCsvk);超文本传输...

    fancyLuo 评论0 收藏0
  • HTTP协议详解

    摘要:协议发展协议是万维网协会和工作小组合作的结果,他们最终发布了一系列的,定义了版本。无状态是指协议对于事务处理没有记忆能力。来说说无状态是一个无状态协议,这意味着每个请求都是独立的。 什么是HTTP协议 引自Wikipediahttps://en.wikipedia.org/wiki...showImg(https://segmentfault.com/img/bVCsvk);超文本传输...

    olle 评论0 收藏0
  • HTTP协议详解

    摘要:协议发展协议是万维网协会和工作小组合作的结果,他们最终发布了一系列的,定义了版本。无状态是指协议对于事务处理没有记忆能力。来说说无状态是一个无状态协议,这意味着每个请求都是独立的。 什么是HTTP协议 引自Wikipediahttps://en.wikipedia.org/wiki...showImg(https://segmentfault.com/img/bVCsvk);超文本传输...

    ccj659 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<