https 页面中引入 http 资源的解决方式
2016-12-16 12:48
399 查看
相对协议
应用场景
浏览器默认是不允许在 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 失败后,使用本地副本。代码判断过程为:
首先检查 jquery 对象是否存在,如果存在,证明 Google CDN 运行正常;
如果不存在,则说明连接 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); }
相关文章推荐
- https 页面中引入 http 资源的解决方式
- 记Outlook插件与Web页面交互的各种坑 (含c# HttpWebRequest 连接https 的完美解决方法)
- 安装完vs.2005之后,重新安装iis后无法使用http方式访问asp.net工程的页面的问题的解决方法
- PHP解决网站从http转https后引用的外部资源警告的问题
- SpringMVC中静态资源无法找到(No mapping found for HTTP request with URI)的四种解决方式
- 如何在HTTPS 网页中引入HTTP资源: Mixed Content?
- 换种思路解决http与https之间的页面调用问题
- https网页加载http资源导致的页面报错及解决方案
- [置顶] nginx中配置https的服务页面中引用http资源问题
- EasyUI Tabs + Yii2.0实现iframe方式打开页面(解决共用静态文件引入加载的问题)
- 让浏览器不再显示 https 页面中的 http 请求警报,所有静态资源强制转https
- chrome浏览器 如何在HTTPS 网页中引入HTTP资源: Mixed Content
- http页面执行https跨协议请求的解决办法
- https页面中含有http资源
- SSL加密不完全的https页面在IE中弹出警告的解决方式
- https和http情况下,H5页面调起微信的拍照与分享功能,导致的config:invalid signature这个错误的解决办法
- 无法显示XML页--名称以无效字符开头。处理资源“http://xxxxxx”时出错的解决办法
- tomcat ,jboss配置https 和 jsp,asp页面上http向https转换
- 通过http/https的POST方式,发送和接受XML文件内容
- IIS调试中:HTTP 错误 401.3 - 访问被资源 ACL 拒绝 的解决方法