在使用SSL加密的网站(https://
)中调用非加密网站(http://
)文件时,IE会弹出一个恶心的对话框:
为解决这个问题,相对协议应运而生:
<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失败后,使用本地副本。 window.jQuery || document.write(…) 首先检查jquery对象是否存在,如果存在,证明Google CDN运行正常;如果不存在啊,则说明连接Google CDN失败,引入本地jQuery库。
关于相对协议更多技术细节可参考 RFC 3986 、 scheme-relative URL。
这个小技巧同样适用于CSS:
.omg { background: url(//websbestgifs.net/kittyonadolphin.gif); }
注意:<link>
或 @import
引入样式表时使用相对协议,IE7、IE8会下载文件两次。