在使用SSL加密的网站(https://)中调用非加密网站(http://)文件时,IE会弹出一个恶心的对话框:

this-page-contains-both-secure-and-nonsecure-items.gif.pagespeed.ce.Rn-8yk3hBV

为解决这个问题,相对协议应运而生:

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

简而言之,就是将URL的协议(httphttps)去掉,只保留://及后面的内容。这样,在使用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失败后,使用本地副本。 window.jQuery || document.write(…) 首先检查jquery对象是否存在,如果存在,证明Google CDN运行正常;如果不存在啊,则说明连接Google CDN失败,引入本地jQuery库。

 

关于相对协议更多技术细节可参考 RFC 3986scheme-relative URL

这个小技巧同样适用于CSS:

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

注意:<link>@import 引入样式表时使用相对协议,IE7、IE8会下载文件两次

via The Protocol-relative URL