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

相對協議

應用場景

瀏覽器默認是不容許在 https 裏面引用 http 資源的，通常都會彈出提示框。

用戶確認後纔會繼續加載，用戶體驗很是差。

並且若是在一個 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引入樣式表時使用相對協議，IE七、IE8 會下載文件兩次。

參考資料

• 相對協議URL

• 如何在HTTPS裏調用HTTP資源不出現提示框