1. 程式人生 > >https 頁面中引入 http 資源的解決方式

https 頁面中引入 http 資源的解決方式

相對協議

應用場景

瀏覽器預設是不允許在 https 裡面引用 http 資源的,一般都會彈出提示框。

467fbcca4de1055c33424e069ef0a186_articlex.gif

使用者確認後才會繼續載入,使用者體驗非常差。

而且如果在一個 https 頁面裡動態的引入 http 資源,比如引入一個 js 檔案,會被直接 block 掉的。Chrome v21 之後,在 SSL 加密頁面 embed 非 SSL 的 Flash 資源也會被默默的遮蔽掉,只留下一句 console 報告。

解決方式

相對協議

如果你的網站同時準備了 https 資源和 http 資源,那麼,可以使用相對協議可以幫助你實現當網站引入的都是 http 資源,網站域名更換為 https 後的無縫切換。

具體使用方法為:

<img src="//domain.com/img/logo.png">

簡而言之,就是將URL的協議(http、https)去掉,只保留//及後面的內容。這樣,在使用https的網站中,瀏覽器會通過https請求URL,否則就通過http傳送請求。

附註:如果是瀏覽本地檔案,瀏覽器通過file://協議傳送請求,導致請求失敗,因此本地測試最好是搭建一個本地伺服器。

HTML5 Boilerplate 使用相對協議請求 Google CDN 中的 jQuery ,使用方式為:

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

上面的例子中除了引用 Google CDN 中的檔案外,還添加了一個本地 jQuery 連結,以便連線 Google CDN 失敗後,使用本地副本。程式碼判斷過程為:

  1. 首先檢查 jquery 物件是否存在,如果存在,證明 Google CDN 執行正常;

  2. 如果不存在,則說明連線 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); }

附註:<link>@import引入樣式表時使用相對協議,IE7、IE8 會下載檔案兩次。