样式文件跨域导致Respond.js插件在IE浏览器失效的问题
样式文件跨域导致Respond.js插件在IE浏览器失效的问题
大笨牛一只 发表于3年前
样式文件跨域导致Respond.js插件在IE浏览器失效的问题
  • 发表于 3年前
  • 阅读 3883
  • 收藏 5
  • 点赞 3
  • 评论 0

【腾讯云】买域名送云解析+SSL证书+建站!>>>   

摘要: 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浏览器测试官方给出的页面都是正常的,网页背景色会随着浏览器窗口的大小改变。可以看到该页面的样式文件和测试页面本身都是在同一个域名下面。而通常大中型网站一般都会把样式文件单独放在一个子域名下面,这种情况如果是单独的引用该插件是不起作用的。

官方给出的解决方案如下图:

例如:

网页的地址为: 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
博文 29
码字总数 9188
×
大笨牛一只
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: