瀏覽器默認(rèn)是不允許在 https 里面引用 http 資源的，一般都會(huì)彈出提示框。用戶(hù)確認(rèn)后才會(huì)繼續(xù)加載，用戶(hù)體驗(yàn)非常差。

而且如果在一個(gè) https 頁(yè)面里動(dòng)態(tài)的引入 http 資源，比如引入一個(gè) js 文件，會(huì)被直接 block 掉的。Chrome v21 之后，在 SSL 加密頁(yè)面 embed 非 SSL 的 Flash 資源也會(huì)被默默的屏蔽掉，只留下一句 console 報(bào)告。

如果你的網(wǎng)站同時(shí)準(zhǔn)備了 https 資源和 http 資源，那么，可以使用相對(duì)協(xié)議可以幫助你實(shí)現(xiàn)當(dāng)網(wǎng)站引入的都是 http 資源，網(wǎng)站域名更換為 https 后的無(wú)縫切換。

方法如下：

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

簡(jiǎn)而言之，就是將URL的協(xié)議（http、https）去掉，只保留//及后面的內(nèi)容。這樣，在使用https的網(wǎng)站中，瀏覽器會(huì)通過(guò)https請(qǐng)求URL，否則就通過(guò)http發(fā)送請(qǐng)求。

附注：如果是瀏覽本地文件，瀏覽器通過(guò)file://協(xié)議發(fā)送請(qǐng)求，導(dǎo)致請(qǐng)求失敗，因此本地測(cè)試最好是搭建一個(gè)本地服務(wù)器。

HTML5 Boilerplate 使用相對(duì)協(xié)議請(qǐng)求 Google CDN 中的 jQuery ，使用方式為：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 

<script>！window.jQuery &&  document.write(unescape('<script src="js/libs/jquery-1.4.2.js"></script>'))</script>

上面的例子中除了引用 Google CDN 中的文件外，還添加了一個(gè)本地 jQuery 鏈接，以便連接 Google CDN 失敗后，使用本地副本。代碼判斷過(guò)程為：

首先檢查 jquery 對(duì)象是否存在，如果存在，證明 Google CDN 運(yùn)行正常；如果不存在，則說(shuō)明連接 Google CDN 失敗，引入本地 jQuery 庫(kù)。

一般情況下，在國(guó)內(nèi)相對(duì)特殊的網(wǎng)絡(luò)環(huán)境中，Google CDN 請(qǐng)求緩慢甚至失敗常有，因此不推薦引用 Google CDN 托管的各種庫(kù)。即便有備用鏈接，瀏覽器還是會(huì)多次嘗試請(qǐng)求 Google CDN 中的文件，這個(gè)過(guò)程可謂漫長(zhǎng)，嚴(yán)重影響頁(yè)面載入速度。

使用 iframe

使用 iframe 的方式引入 http 資源，比如在 https 里面播放優(yōu)酷的視頻，我們可以先在一個(gè) http 的頁(yè)面里播放優(yōu)酷視頻，然后將這個(gè)頁(yè)面嵌入到 https 頁(yè)面里就可以了。

另外一個(gè)典型的例子是在 https 頁(yè)面里通過(guò) Ajax 的方式請(qǐng)求 http 資源，Chrome 是不允許直接 Ajax 請(qǐng)求 http 的。

如果兩個(gè)頁(yè)面的內(nèi)容都可以控制的話(huà)，當(dāng)前窗口可以 iframe 窗口進(jìn)行通信。

這個(gè)小技巧同樣適用于 CSS ：

.omg { background: url(//websbestgifs.net/kittyonadolphin.gif); }

附注：<link>或@import引入樣式表時(shí)使用相對(duì)協(xié)議，IE7、IE8 會(huì)下載文件兩次

讓價(jià)值共享 記錄企業(yè)發(fā)展腳步 感恩相伴

溫馨提醒：找西安做網(wǎng)站的公司，請(qǐng)選擇手續(xù)齊全、業(yè)務(wù)精、服務(wù)好的正規(guī)公司