样式文件跨域导致Respond.js插件在IE浏览器失效的问题
2014-11-26 00:00
405 查看
摘要: Respond.js插件在IE浏览器下,如果遇到样式文件跨域的情况,需要做稍微复杂一点的处理
Respond.js主页: https://github.com/scottjehl/Respond
Respond.js是为了解决IE6-IE8不支持响应式设计而编写的一个插件,可以实现css3的媒体查询,官方演示地址:https://rawgit.com/scottjehl/Respond/master/test/test.html
在Chrome、Firefox、IE浏览器测试官方给出的页面都是正常的,网页背景色会随着浏览器窗口的大小改变。可以看到该页面的样式文件和测试页面本身都是在同一个域名下面。而通常大中型网站一般都会把样式文件单独放在一个子域名下面,这种情况如果是单独的引用该插件是不起作用的。
官方给出的解决方案如下图:
例如:
Respond.js主页: https://github.com/scottjehl/Respond
Respond.js是为了解决IE6-IE8不支持响应式设计而编写的一个插件,可以实现css3的媒体查询,官方演示地址:https://rawgit.com/scottjehl/Respond/master/test/test.html
在Chrome、Firefox、IE浏览器测试官方给出的页面都是正常的,网页背景色会随着浏览器窗口的大小改变。可以看到该页面的样式文件和测试页面本身都是在同一个域名下面。而通常大中型网站一般都会把样式文件单独放在一个子域名下面,这种情况如果是单独的引用该插件是不起作用的。
官方给出的解决方案如下图:
例如:
网页的地址为: http://www.domain.com/index.html css文件地址为: http://static.domain.com/css/common.css Respond.js文件地址为: http://static.domain.com/js/Respond.js[/code]
将下载的压缩包下cross-domain文件夹中的两个文件:respond-proxy.html、 respond.proxy.gif 放置到 www.domain.com域名所在的文件夹下,文件路径假设为:http://www.domain.com/respond/respond-proxy.html http://www.domain.com/respond/respond.proxy.gif[/code]
文件respond-proxy.html放在子域名所在文件夹下,文件路径假设为:http://static.domain.com/html/respond-proxy.html
网页文件http://www.domain.com/index.html 的头部应该这样写:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Respond JS Test Page</title> <!--子域名的文件--> <link href="http://static.domain.com/css/common.css" rel="stylesheet"/> <script src="http://static.domain.com/js/Respond.js"></script> <link href="http://static.domain.com/html/respond-proxy.html" id="respond-proxy" rel="respond-proxy" /> <!--网页所在域名的文件--> <link href="http://www.domain.com/respond/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" /> <script src="http://www.domain.com/respond/respond.proxy.js"></script> </head> <body> <p>网页内容</p> </body> </html>
窄屏情况下IE浏览器会出现0.5秒的闪屏现象,不过看起来不算不太明显。
何时IE全消灭,天下前端俱欢颜!
相关文章推荐
- js或者JQ的focus和select失效问题和input type=file上传文件问题
- js外部文件乱码以及失效问题
- jquery uploadify上传文件插件导致浏览器崩溃问题解决方法
- 关于spring mvc拦截器拦截js文件等导致无法正常使用问题的解决
- webview4.4以上版本使用loadurl加载过长js文件失效问题
- servlet跳转页面导致css,js等失效的问题
- ajaxfileUpload.js 上传文件 IE浏览器提示下载json的问题
- jquery uploadify上传文件插件导致浏览器崩溃问题解决方法
- Rails : css或js文件无法成功预编译或调用jquery类插件时预编译问题
- 网站调用其他域名的静态文件导致的跨域问题、CORS错误解决方法
- css文件引用后变成了乱码导致样式不能显示的问题的解决
- jquery.form.js ie 下下载文件已经ie8失效问题解决方案
- ajax动态加载js,导致js不执行失效问题
- ajax动态加载js,导致js不执行失效问题吻
- IE下JS文件失效问题总结
- 关于jquery.form.js插件的无刷新上传文件使用的问题
- knockoutjs with绑定导致unobtrusive validation失效的问题
- 一个js导致的jquery失效问题的解决方法
- js 加载跨域文件 权限问题
- respond.min.js IE失效问题