前端技术一之让IE系列浏览器支持HTML5新标签


虽然HTML5还只是草案,但是HTML5+CSS3已经成了现在设计流行的蜂巢,CSSer们赶紧hold住啊!现在标准浏览器都开始支持HTML5标签了,那历史悠久的IE6-8怎么办?(IE9已支持HTML5标签)
一段1.29KB的JS就能解决上面的问题?不管你信不信,反正哥是信了,
用法:


下面看看源代码,相信不难理解!

// iepp v1.6.2 MIT @jon_neal
(function(win, doc) {
var elems = 'abbr|article|aside|audio|canvas|details|figcaption|figure|footer
|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video',
		elemsArr = elems.split('|'),
		elemsArrLen = elemsArr.length,
		elemRegExp = new RegExp('(^|\\s)('+elems+')', 'gi'), 
		tagRegExp = new RegExp('<(\/*)('+elems+')', 'gi'),
		ruleRegExp = new RegExp('(^|[^\\n]*?\\s)('+elems+')([^\\n]*)({[\\n\\w\\W]*?})', 'gi'),
		docFrag = doc.createDocumentFragment(),
		html = doc.documentElement,
		head = html.firstChild,
		bodyElem = doc.createElement('body'),
		styleElem = doc.createElement('style'),
		body;
	function shim(doc) {
		var a = -1;
		while (++a < elemsArrLen)
			// Use createElement so IE allows HTML5-named elements in a document
			doc.createElement(elemsArr[a]);
	}
	function getCSS(styleSheetList, mediaType) {
		var a = -1,
			len = styleSheetList.length,
			styleSheet,
			cssTextArr = [];
		while (++a < len) {
			styleSheet = styleSheetList[a];
			// Get css from all non-screen stylesheets and their imports
			if ((mediaType = styleSheet.media || mediaType) != 'screen') cssTextArr.push(getCSS(styleSheet.imports, mediaType), styleSheet.cssText);
		}
		return cssTextArr.join('');
	}
	// Shim the document and iepp fragment
	shim(doc);
	shim(docFrag);
	// Add iepp custom print style element
	head.insertBefore(styleElem, head.firstChild);
	styleElem.media = 'print';
	win.attachEvent(
		'onbeforeprint',
		function() {
			var a = -1,
				cssText = getCSS(doc.styleSheets, 'all'),
				cssTextArr = [],
				rule;
			body = body || doc.body;
			// Get only rules which reference HTML5 elements by name
			while ((rule = ruleRegExp.exec(cssText)) != null)
				// Replace all html5 element references with iepp substitute classnames
				cssTextArr.push((rule[1]+rule[2]+rule[3]).replace(elemRegExp, '$1.iepp_$2')+rule[4]);
			// Write iepp custom print CSS
			styleElem.styleSheet.cssText = cssTextArr.join('\n');
			while (++a < elemsArrLen) {
				var nodeList = doc.getElementsByTagName(elemsArr[a]),
					nodeListLen = nodeList.length,
					b = -1;
				while (++b < nodeListLen)
					if (nodeList[b].className.indexOf('iepp_') < 0)
						// Append iepp substitute classnames to all html5 elements
						nodeList[b].className += ' iepp_'+elemsArr[a];
			}
			docFrag.appendChild(body);
			html.appendChild(bodyElem);
			// Write iepp substitute print-safe document
			bodyElem.className = body.className;
			// Replace HTML5 elements with  which is print-safe and shouldn't conflict since it isn't part of html5
			bodyElem.innerHTML = body.innerHTML.replace(tagRegExp, '<$1font');
		}
	);
	win.attachEvent(
		'onafterprint',
		function() {
			// Undo everything done in onbeforeprint
			bodyElem.innerHTML = '';
			html.removeChild(bodyElem);
			html.appendChild(body);
			styleElem.styleSheet.cssText = '';
		}
	);
})(this, document);

是不是很神奇!
下面来介绍一个跟简单的方法,同样是javascript,代码很少但是同样能解决问题!

var html5Tags=['header' ,'footer','article','nav' ,'section','aside']; //页面上用到的HTML5标签
for(var i=0;i

以上方法是在腾讯WSD上面看到的,原理很简单通过document.createElemen来创建HTML5标签

“前端技术一之让IE系列浏览器支持HTML5新标签”的一个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注