IE 6 阻挡脚本

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

厌倦了支持 IE 6? 准备好将其切断了吗? 我不怪你。 我通常认为 大多数问题 人们在 IE 6 中遇到的问题,通过实践很容易解决,但这并不总是这样,我觉得 JavaScript 支持对开发人员来说更成问题。

很多时候,这只是取决于如何最好地利用你的时间。 如果你必须在设计和编码一个你的网站的新功能(80% 的用户会使用和喜欢)和解决 IE 6 的错误(针对 20% 的用户,而且还在缩减)之间做出选择,我会选择新的功能。

但随之而来的问题是,你将如何停止支持 IE 6。 你什么也不做,让布局变得糟糕,功能被切断吗? 我认为这是一个糟糕的主意。 如果你停止支持 IE 6,就自信地去做,并告诉那些用户他们可以做什么!

这就是 IE 6 阻挡脚本 的用武之地。 使用一小段简单的 JavaScript 浏览器检测和一些 jQuery,我们可以用一个非常明确的信息来放弃对 IE 6 的支持。

查看演示下载文件

 

下面我们将详细说明它是如何工作的以及如何使用它。

包含和浏览器检测

在网站的 <head> 部分,我们需要包含 jQuery 和脚本文件。

	 ...
	 <script type="text/javascript" src="jquery-1.2.6.min.js"></script> 
	 <script type="text/javascript" src="jquery.ie6blocker.js"></script> 
</head>

ie6blocker.js 脚本在其第一行执行浏览器检测

var IE6 = (navigator.userAgent.indexOf("MSIE 6")>=0) ? true : false;
if(IE6) {
   ... do stuff ...
}

或者,我们可以在 HTML 文件中使用条件注释语句进行浏览器检测

<!--[if IE 6]>
	<script type="text/javascript" src="jquery.ie6blocker.js"></script> 
<![endif]-->

但是,由于我们的技术需要启用 JavaScript 才能工作,所以我们不妨让 JavaScript 来完成检测。 你也可以用两种方式来做...

jQuery

现在我们已经检测到 IE 6,我们将使用 jQuery 来构建一些新的页面元素并将其插入到页面中。 目标是创建一个透明的黑色覆盖层,覆盖整个屏幕(使网站可识别但无法使用)。 然后在覆盖层之上,放置一个居中的消息框,解释网站有意不支持 IE 6。 为了减轻打击,你可能需要提供一个查看内容的备用方式(例如博客的 RSS 订阅)。 有些人无法升级浏览器,所以仅向他们发送升级的通知可能不够。

将需要两个 div。 一个用于 覆盖层,另一个用于 消息框。 我们可以直接在 jQuery JavaScript 中创建它们,包括 CSS、内容等等

这是覆盖层

$("<div>")
	.css({
		'position': 'absolute',
		'top': '0px',
		'left': '0px',
		backgroundColor: 'black',
		'opacity': '0.75',
		'width': '100%',
		'height': $(window).height(),
		zIndex: 5000
	})
	.appendTo("body");

在现代浏览器中,我们可以直接将 top、right、bottom 和 left 都设置为 0px,但 IE 6 不喜欢这样,所以我们需要将 top 和 left 设置为 0px,将 width 设置为 100%。 height 稍微复杂一些。 将其设置为 100% 在 IE 6 中不起作用。 我们只能使用一个很大的静态数字,但这不好玩,而且会触发可能不需要的滚动条。 许多“lightbox”覆盖层使用专有的 CSS “表达式”来获取窗口高度,就像这样

height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); 

这在我们这里不起作用,因为 jQuery 以“内联”方式应用了这种样式,因此不会以这种方式计算。 幸运的是,jQuery 现在能够计算窗口高度。 (jQuery 的较新版本内置了旧的尺寸插件)。 这里还使用了一个较高的 z-index 值,以确保覆盖层位于所有其他内容之上。

这是消息框

$("<div><img src='no-ie6.png' alt='' style='float: left;'/><p><br /><strong>Sorry! This page doesn't support Internet Explorer 6.</strong><br /><br />If you'd like to read our content please <a href='http://getfirefox.org'>upgrade your browser</a> or <a href='http://feeds.feedburner.com/CssTricks'>subscribe to our RSS feed</a>.</p>")
	.css({
		backgroundColor: 'white',
		'top': '50%',
		'left': '50%',
		marginLeft: -210,
		marginTop: -100,
		width: 410,
		paddingRight: 10,
		height: 200,
		'position': 'absolute',
		zIndex: 6000
	})
	.appendTo("body");

注意,所有用于消息框的标记都在那里,在一个大型的 jQuery 对象中。 这里关注的 CSS 是,我们设置了 left 和 top 值为 50%,然后使用负边距将其拉回到中心(理论)。 然后我们使用更高的 z-index 值,将其置于覆盖层之上。

就这样! 真的非常简单。 请随时下载文件,以任何你认为合适的方式修改它们,并自行使用。

查看演示下载文件

 

注意:我并不建议世界上每个网站都放弃对 IE 6 的支持。 我只是将其作为一项教程和理论,展示了如何做到这一点。 你应该根据你自己的受众,自己决定是否支持 IE 6。