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

前几天在作一个翻译小应用的时候，发如今安卓手机端能够正常运行，而在苹果手机和谷歌浏览器中不能正常运行（可能safari和Chrome的内核都是webkit内核的缘由，仍是webkit内核大法好^__^），电脑端有提示不安全提示，而手机端不会有任何提示。

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

上社区寻求答案后得知，是由于github全站开启了https，而在个人html页面的head中，有一些资源是以http的形式引入的，以下图

也就是说，若是你的主站点是https的，那么里面的全部资源就必须都要以https的形式引入，否则浏览器的安全机制就会把这部分资源block掉，致使没法正常运行。

解决方案有如下几种：

1. 将资源引入形式改为https

2. 选择相对协议，也就是说，将头部的http/https去掉，只保留以后的部分，像这样：

   <link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
   这样的好处是浏览器可以根据你的网站所采用的协议来加载文件。

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

建议：

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