yufan.me/source/_posts/2013-05-01.md

title	tags	categories	permalink	featureImage	date
协议相关的链接	Schema	学习	the-protocol-relative-url	https://cat.yufan.me/cats/ame/the-protocol-relative-url.jpg	2013-05-01 05:19:12

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

<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 译者：雨帆，转载时请保留译文链接和原文链接。