网站启用HTTPS协议后通过相对协议解决混合内容

当网站启用https协议后,在打开SSL加密的网站( https:// )中调用非加密内容( http:// )文件时,浏览器会报不安全,提示有混合内容,不同的浏览器对混合内容的处理方式不一样,IE底部会弹出确认框,Chrome直接在浏览器栏提示不安全,严重影响用户体验。其实解决这个问题的方法很简单,就是通过相对协议。

相对协议示例

<img src="//www.xiayige.org/images/logo.png" />

简而言之,就是将URL的协议( http 、 https )去掉,只保留 // 及后面的内容。

这样子有什么好处呢?

可以自动匹配网站主协议,假设用https打开网站,那么静态资源等内容自动用https协议加载,同样的,用http打开网站,那么静态资源等内容会自动用http协议加载。

相对协议同样适用于CSS:

.logo { background: url(//www.xiayige.org/images/logo.gif); }

注意: 或 @import 引入样式表时使用相对协议,IE7、IE8会下载文件两次