文档章节

样式文件跨域导致Respond.js插件在IE浏览器失效的问题

西迷岛主
 西迷岛主
发布于 2014/11/26 18:13
字数 481
阅读 4036
收藏 5

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


将下载的压缩包下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


文件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全消灭,天下前端俱欢颜!



© 著作权归作者所有

共有 人打赏支持
西迷岛主
粉丝 4
博文 31
码字总数 10263
作品 0
广州
个人站长
私信 提问
让Bootstrap 3兼容IE8浏览器

让Bootstrap 3兼容IE8浏览器 看到这篇文章有越来越多的人看,我决定给大家节省时间,废话少说。有几个点大家要注意。 1、本地调试需要Web Server(如IIS、Apache,Nginx),单纯地本地打开文...

次长风
2015/07/31
0
1
Bootstrap起步介绍

起步 简要介绍Bootstrap,以及如何下载、使用,还有基本模板案例等等. 下载 下载bootstrap有三种形式. 用于生产环境的Bootstrap 编译并压缩后的Css、Javascript和字体文件.不包含文档和源文件...

名字已被取
2016/04/07
199
0
ZUI 1.3 发布,性感无比的 HTML5 前端 UI 框架

ZUI v 1.3 一个开源前端实践方案,帮助你快速构现代跨屏应用。 在Github上项目:https://github.com/easysoft/zui 特色 简单易用,快速构建美观的现代web应用; 轻量级高性能,让你的应用更快...

开源中国总统
2015/12/12
16.1K
24
ZUI 发布 1.3 版本,全新的文档网站来了!

ZUI正式发布1.3版本。 全新的文档网站来了!键盘侠新福利:使用搜索来查找内容,并支持快捷键操作。 新增图表视图组件,支持对饼图、柱状图和曲线图的展示。 另外微调了默认配色,对多个组件...

炒蚕豆吃蹦豆
2015/05/19
17.6K
62
关于浏览器的兼容问题

关于浏览器的兼容问题 1. 什么是 CSS hack 根据百度的简述:CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如...

熊蛋子17
2017/11/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【58沈剑 架构师之路】选redis还是memcache,源码怎么说

memcache和redis是互联网分层架构中,最常用的KV缓存。不少同学在选型的时候会纠结,到底是选择memcache还是redis。 画外音:不鼓励粗暴的实践,例如“memcache提供的功能是redis提供的功能的...

张锦飞
11分钟前
1
0
不要依赖于线程调度器(72)

多个线程可运行时, 线程调度器决定哪些线程将会被运行、以及运行多长时间 任何操作系统在处理该问题时,会 尽力做到公正,但是策略却大相径庭 编写良好的程序不要依赖这种策略细节,否则程序...

Java搬砖工程师
14分钟前
0
0
路由器AP、路由、中继、桥接模式之间的区别

在TP-Link迷你无线路由器上一般有AP(接入点)模式、Router(无线路由)模式、Repeater(中继)模式、Bridge(桥接)模式、 Client(客户端)模式;已经属于模式很全的路由了,尽管仅仅只是一个小...

吴伟祥
14分钟前
0
0
初识kafka的zookeeper

最近项目中,使用redis进行消息的分发与订阅。这种模式就是一种多播的方式,但是随着消息的不断增加,消费端来不及处理所有的数据。在没有持久化的功能下,很多数据丢失了。当然,也可以使用...

孟飞阳
16分钟前
1
0
赋能时空云计算,阿里云数据库时空引擎Ganos上线

随着移动互联网、位置感知技术、对地观测技术的快速发展,时空信息已从传统GIS行业渗透到大众应用及各行各业。从静态POI(兴趣点)到APP位置信息,从导航电子地图到车辆行驶轨迹,从卫星影像...

阿里云官方博客
18分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部