https 页面中引入 http 资源的解决方式

相对协议

应用场景

浏览器默认是不容许在 https 里面引用 http 资源的，通常都会弹出提示框。

用户确认后才会继续加载，用户体验很是差。

并且若是在一个 https 页面里动态的引入 http 资源，好比引入一个 js 文件，会被直接 block 掉的。Chrome v21 以后，在 SSL 加密页面 embed 非 SSL 的 Flash 资源也会被默默的屏蔽掉，只留下一句 console 报告。

解决方式

相对协议

若是你的网站同时准备了 https 资源和 http 资源，那么，可使用相对协议能够帮助你实现当网站引入的都是 http 资源，网站域名更换为 https 后的无缝切换。

具体使用方法为：

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

简而言之，就是将URL的协议（http、https）去掉，只保留//及后面的内容。这样，在使用https的网站中，浏览器会经过https请求URL，不然就经过http发送请求。

附注：若是是浏览本地文件，浏览器经过file://协议发送请求，致使请求失败，所以本地测试最好是搭建一个本地服务器。

HTML5 Boilerplate 使用相对协议请求 Google 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>

上面的例子中除了引用 Google CDN 中的文件外，还添加了一个本地 jQuery 连接，以便链接 Google CDN 失败后，使用本地副本。代码判断过程为：

1. 首先检查 jquery 对象是否存在，若是存在，证实 Google CDN 运行正常；

2. 若是不存在，则说明链接 Google CDN 失败，引入本地 jQuery 库。

本猿认为，在国内相对特殊的网络环境中，Google CDN 请求缓慢甚至失败常有，所以不推荐引用 Google CDN 托管的各类库。即使有备用连接，浏览器仍是会屡次尝试请求 Google CDN 中的文件，这个过程可谓漫长，严重影响页面载入速度。

使用 iframe

使用 iframe 的方式引入 http 资源，好比在 https 里面播放优酷的视频，咱们能够先在一个 http 的页面里播放优酷视频，而后将这个页面嵌入到 https 页面里就能够了。

另一个典型的例子是在 https 页面里经过 Ajax 的方式请求 http 资源，Chrome 是不容许直接 Ajax 请求 http 的。若是两个页面的内容均可以控制的话，当前窗口能够 iframe 窗口进行通讯。

其余用法

这个小技巧一样适用于 CSS ：

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

附注：<link>或@import引入样式表时使用相对协议，IE七、IE8 会下载文件两次。

参考资料

• 相对协议URL

• 如何在HTTPS里调用HTTP资源不出现提示框