https页面无法访问http资源？protocol-relative URL（协议相对URl）与使用混合协议的应用...

---

theme: channing-cyan

highlight: a11y-dark

https页面无法访问http资源？protocol-relative URL(协议相对URl)与使用混合协议的应用

相对protocol-relative URL(协议相对URl)

协议相对URl，是指在编写URL时不携带具体的协议类型，URL被访问执行时，根绝一定规则自动使用相对的协议类型。例如，当人们通过https浏览页面时候，那么不写明具体协议类型的的图片资源URL，就会以https协议访问图片资源；使用http浏览页面时，使用相对协议URL的资源就会以http请求资源。

js <img src="//domain.com/logo.png"> 在https页面浏览该图，则访问该图时，完整的URL会是 js <img src="https//domain.com/logo.png"> 在http页面浏览该图，则访问该图时，完整的URL会是

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

在CSS中同样可以使用相对URL ```css

logo { background : url (//domain.com/logo.png )}

```

使用混合协议的应用

https页面无法访问http资源现象

有时我们会发现，当在https页面使用http访问资源时，会被浏览器发出警告，甚至报错阻止程序继续执行，这在iOS的手机浏览器中感受尤为明显。

但反之，在http页面使用https访问资源则不受限。

使用相对协议URL的好处

此时，使用相对协议URL，可能会是一个好的选择。因为使用相对协议URL，在用http或https浏览页面时，浏览器都会以相同的协议请求对应的资源，这能较好地避免浏览器关于使用混合协议的警告。在SSL证书是后面使用的场景中，资源URL也不用更换，意思是说存储起来的资源地址(例如图片地址)，可以不是绝对地址，可以不携带协议类型，甚至连域名都不带也是一种具有可行的方案。

注意事项

浏览器兼容性上，在IE7 / IE8中，使用 或者 @import 来引用样式表时，会出现样式表文件被下载两次的情况。这是不得不考虑情况，作为一线开发，很遗憾IE未能在一片赞扬和欢送中退休，主要还是一些特殊企业和单位使用IE的情况还是很常见的。