以双斜杠开头的URL – 依赖协议的URL

2014-02-27 · 4 min read

不知道大家有没有见过下面这种 url 写法:

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

img 中的 url 是以双斜杠“//”开头的,这种写法有特殊的用途,它会判断当前的页面协议是 http 还是 https 来决定请求 url 的协议。防止 IE 下出现“This Page Contains Both Secure and Non-Secure Items”的报错。 但是当你浏览本地文件的时候,它会解析为 file:// 协议。这种特性可以用来加载 CDN:

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

也适用于 CSS:

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

注意:如果在 IE7,IE8 中使用和 @import 引入 CSS 的时候,会下载两次 CSS 文件。 参考:http://www.paulirish.com/2010/the-protocol-relative-url/