65 lines
3.9 KiB
Markdown
65 lines
3.9 KiB
Markdown
---
|
||
title: 协议相关的链接
|
||
tags:
|
||
- Schema
|
||
categories: 学习
|
||
permalink: the-protocol-relative-url
|
||
featureImage: https://cat.yufan.me/cats/ame/the-protocol-relative-url.jpg
|
||
date: 2013-05-01 05:19:12
|
||
---
|
||
|
||
这里有一个你可以拿走，并将能拯救你于头痛中的小窍门。
|
||
|
||
```javascript
|
||
<img src="//domain.com/img/logo.png">
|
||
```
|
||
|
||
|
||
|
||
如果游览器正通过HTTPS访问当前页面，然后它将使用HTTPS协议请求上面的资源。否则，游览器将通常用HTTP请求资源。这样阻止了在IE中讨厌的错误信息：“此页包含安全和不安全的项目”，使你的所有资源请求保持在相同的协议内。
|
||
|
||
<!-- more -->
|
||
|
||
当然，如果你正在游览本地文件，游览器将尝试使用`file://`协议获取文件。
|
||
|
||
我们在[HTML5模板文件](http://html5boilerplate.com/)中使用了此技巧来智能地从谷歌CDN上获取jQuery。
|
||
|
||
```javascript
|
||
<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](http://tools.ietf.org/html/rfc3986#section-4.2)这种链接写法被叫作“网络路径引用”。对了，如果你想[严格正确](http://url.spec.whatwg.org/#concept-scheme-relative-url)地使用，当论及URL时，请使用术语“scheme（系统）”而不是“protocol（协议）”。
|
||
|
||
这个技巧在CSS中同样完美有效。
|
||
|
||
```css
|
||
.omgomg { background: url(//websbestgifs.net/kittyonadolphin.gif); }
|
||
```
|
||
…假设你正指向的网站拥有通过HTTP和HTTPS均能获取的资源。
|
||
|
||
警告：当在<link>或@import语句上对一个样式表使用本技巧时，IE7和IE8会下载两遍链接指向的文件。然而所有其它的游览器均没有此问题。
|
||
|
||
感谢miketaylr、ralphholzmann、annevk在这个上面付出的智慧。同时感谢ajaxian，一个我记得是4年前学习到此技巧的地方。也许吧。
|
||
|
||
>2011年1月23日：但是…[在谷歌分析代码中使用这个技巧](http://mathiasbynens.be/notes/async-analytics-snippet#protocol-check)如何？
|
||
>当然没问题，那样做不是很棒？…因此我和谷歌分析的JavaScript首席开发者一起研究（天哪，我喜欢在谷歌工作）是否我们可以这么做…结果是我们不能。在IE6中有一个edgecase故障会导致会话<sup>注1</sup>中断…受一些安全设置的影响（不确定它们是否为默认）当请求非SSL子域名资源时，就出现如下面截图的情况。所以如果你并不在乎IE6的话，轻松地从你的GA<sup>注2</sup>代码中去掉那40 bytes。否则，你将需要那个三元运算符<sup>注3</sup>。)
|
||
|
||
|
||
|
||
>2011年12月24日：Eric Law（来自IE团队）说明了为什么IE6与GA不兼容…
|
||
|
||
>在IE6中没有生效的原因是由于服务器使用SNI来确定返回什么样的认证。XP（因此是IE6）在HTTPS 堆中并不支持SNI。[详细了解](http://blogs.msdn.com/b/ieinternals/archive/2009/12/07/certificate-name-mismatch-warnings-and-server-name-indication.aspx)。
|
||
|
||
----
|
||
|
||
* **注1**：会话这里指HTTP会话，包含4步。建立TCP连接→发出请求文档→发出响应文档→释放TCP连接
|
||
* **注2**：此处的GA和下面的GA均指的是Google Analytics，GA代码也就是经典的ga.js——谷歌分析代码。
|
||
* **注3**：此处的三元运算符在详细看了[Scheme Relative URL](http://url.spec.whatwg.org/#concept-scheme-relative-url)后便可理解，作为非技术人员，只需知道是完整的URL链接。
|
||
* **注4**：[定制优化你的GA代码](http://mathiasbynens.be/notes/async-analytics-snippet)
|
||
|
||
----
|
||
|
||
原文：[The Protocol-relative URL](http://paulirish.com/2010/the-protocol-relative-url/)
|
||
译者：[雨帆](http://yufan.me)，转载时请保留译文链接和原文链接。
|