文档章节

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

西迷岛主
 西迷岛主
发布于 2014/11/26 18:13
字数 481
阅读 4.3K
收藏 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
广州
个人站长
私信 提问
加载中

评论(0)

让Bootstrap 3兼容IE8浏览器

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

次长风
2015/07/31
265
1
【转】让Bootstrap 3兼容IE8浏览器

FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所...

Athrun
2016/07/13
0
0
Bootstrap起步介绍

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

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

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

开源中国总统
2015/12/12
1.7W
24
解决低版本IE关于html5新特性的兼容性问题html5shiv.js和Respond.js,以及excanvas.js解决低版本IE不支持canvas的问题

插件:html5shiv.js 让IE9以下版本支持html5新标签,git地址https://github.com/aFarkas/html5shiv 用于解决IE9以下版本浏览器对HTML5新增标签不识别,并导致CSS不起作用的问题。所以我们在使...

osc_o9s0hujy
2019/05/08
3
0

没有更多内容

加载失败,请刷新页面

加载更多

web前端入门知识大全:系统路线,各类要点解析

一、WEB前端是什么? 使用HTML/CSS/JS以及更多的框架技术,编写网站页面、App应用、小程序、2D&3D游戏、Web VR&AR等应用,通过内容设计、交互动画、数据操作构建项目与用户的交互界面。前端开...

梦想编程
今天
11
0
一个软件测试7年的程序员,讲述自己两年突破瓶颈的经验,关注这些能让你少走弯路。

突破自己的技术瓶颈并不是一蹴而就,还是需要看清楚一些东西,这里也有一些经验和见解跟大家分享一下。同样是职场人士,我也有我的经历和故事。在工作期间,我有过2年加薪7次的小小“战绩”(...

爱码小哥
今天
8
0
ReentrantLock 读写锁

写写共享 读写互斥 写写互斥 适合读多的业务 提高效率 import java.util.concurrent.locks.ReentrantReadWriteLock;import java.util.concurrent.locks.ReentrantReadWriteLock.ReadLock;......

Joker上上签
今天
20
0
IM即时通讯 时间处理1

function formatDate(now) { let date = new Date(now); let Y = date.getFullYear() + '-'; let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getM......

lsy999
今天
9
0
rust tokio mpsc 异步发送数据

启动两个异步任务,一个阻塞在键盘输入。一个间歇的读取通道,有数据就输出。在快速输入的时候会卡住,因为 mpsc 的 buffer 设置为了 5。 代码如下: use std::io;use tokio::task;use to...

Anunakee
今天
16
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部