menu
协议相关的链接

这里有一个你可以拿走,并将能拯救你于头痛中的小窍门。

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

如果游览器正通过 HTTPS 访问当前页面,然后它将使用 HTTPS 协议请求上面的资源。否则,游览器将通常用 HTTP 请求资源。这样阻止了在 IE 中讨厌的错误信息:“此页包含安全和不安全的项目”,使你的所有资源请求保持在相同的协议内。

当然,如果你正在游览本地文件,游览器将尝试使用 file:// 协议获取文件。

我们在 HTML5 模板文件 中使用了此技巧来智能地从谷歌 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>

从技术上而言,根据 RFC 3986 这种链接写法被叫作“网络路径引用”。对了,如果你想 严格正确 地使用,当论及 URL 时,请使用术语“scheme(系统)”而不是“protocol(协议)”。

这个技巧在 CSS 中同样完美有效。

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

…假设你正指向的网站拥有通过 HTTP 和 HTTPS 均能获取的资源。

警告:当在或 @import 语句上对一个样式表使用本技巧时,IE7 和 IE8 会下载两遍链接指向的文件。然而所有其它的游览器均没有此问题。

感谢 miketaylr、ralphholzmann、annevk 在这个上面付出的智慧。同时感谢 ajaxian,一个我记得是 4 年前学习到此技巧的地方。也许吧。

2011 年 1 月 23 日:但是…在谷歌分析代码中使用这个技巧 如何?
当然没问题,那样做不是很棒?…因此我和谷歌分析的 JavaScript 首席开发者一起研究(天哪,我喜欢在谷歌工作)是否我们可以这么做…结果是我们不能。在 IE6 中有一个 edgecase 故障会导致会话 注 1中断…受一些安全设置的影响(不确定它们是否为默认)当请求非 SSL 子域名资源时,就出现如下面截图的情况。所以如果你并不在乎 IE6 的话,轻松地从你的 GA注 2代码中去掉那 40 bytes。否则,你将需要那个三元运算符 注 3。)

2011 年 12 月 24 日:Eric Law(来自 IE 团队)说明了为什么 IE6 与 GA 不兼容…

在 IE6 中没有生效的原因是由于服务器使用 SNI 来确定返回什么样的认证。XP(因此是 IE6)在 HTTPS 堆中并不支持 SNI。详细了解


  • 注 1:会话这里指 HTTP 会话,包含 4 步。建立 TCP 连接→发出请求文档→发出响应文档→释放 TCP 连接
  • 注 2:此处的 GA 和下面的 GA 均指的是 Google Analytics,GA 代码也就是经典的 ga.js——谷歌分析代码。
  • 注 3:此处的三元运算符在详细看了 Scheme Relative URL 后便可理解,作为非技术人员,只需知道是完整的 URL 链接。
  • 注 4定制优化你的 GA 代码

原文:The Protocol-relative URL
译者:雨帆,转载时请保留译文链接和原文链接。