如何在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引入，在部署階段用相對協議，或者直接在本地建一個服務器，以服務器的形式打開頁面，就不會出現瀏覽器沒法加載相對協議下的資源的狀況了。