竹磬网-邵珠庆の日记 生命只有一次，你可以用它来做些更多伟大的事情–Make the world a little better and easier


36月/130

让你的IE6、7、8 都很好的支持HTML5标签

发布在 邵珠庆

 

在旧有的浏览器里面，很多元素都是不支持的，即使解析出来也是内联标签。所以某位外国大牛就写了JS把文本中的一些标记替换成了块标签，从而解决了IE的很多历史遗留问题。这对于HTML5的使用推广来说是一个历史性的变革，也能很好的解决一些兼容性问题。

https://github.com/sebastianbergmann/php-code-coverage/pull/128

JS代码：

001 /**
002 * @preserve HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
003 */
004 ;(function(window, document) {
005 /*jshint evil:true */
006   /** version */
007   var version = '3.6.2pre';
008  
009   /** Preset options */
010   var options = window.html5 || {};
011  
012   /** Used to skip problem elements */
013   var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
014  
015   /** Not all elements can be cloned in IE **/
016   var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;
017  
018   /** Detect whether the browser supports default html5 styles */
019   var supportsHtml5Styles;
020  
021   /** Name of the expando, to work with multiple documents or to re-shiv one document */
022   var expando = '_html5shiv';
023  
024   /** The id for the the documents expando */
025   var expanID = 0;
026  
027   /** Cached data for each document */
028   var expandoData = {};
029  
030   /** Detect whether the browser supports unknown elements */
031   var supportsUnknownElements;
032  
033   (function() {
034     try {
035         var a = document.createElement('a');
036         a.innerHTML = '<xyz></xyz>';
037         //if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles
038         supportsHtml5Styles = ('hidden' in a);
039  
040         supportsUnknownElements = a.childNodes.length == 1 || (function() {
041           // assign a false positive if unable to shiv
042           (document.createElement)('a');
043           var frag = document.createDocumentFragment();
044           return (
045             typeof frag.cloneNode == 'undefined' ||
046             typeof frag.createDocumentFragment == 'undefined' ||
047             typeof frag.createElement == 'undefined'
048           );
049         }());
050     } catch(e) {
051       supportsHtml5Styles = true;
052       supportsUnknownElements = true;
053     }
054  
055   }());
056  
057   /*--------------------------------------------------------------------------*/
058  
059   /**
060 * Creates a style sheet with the given CSS text and adds it to the document.
061 * @private
062 * @param {Document} ownerDocument The document.
063 * @param {String} cssText The CSS text.
064 * @returns {StyleSheet} The style element.
065 */
066   function addStyleSheet(ownerDocument, cssText) {
067     var p = ownerDocument.createElement('p'),
068         parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;
069  
070     p.innerHTML = 'x<style>' + cssText + '</style>';
071     return parent.insertBefore(p.lastChild, parent.firstChild);
072   }
073  
074   /**
075 * Returns the value of `html5.elements` as an array.
076 * @private
077 * @returns {Array} An array of shived element node names.
078 */
079   function getElements() {
080     var elements = html5.elements;
081     return typeof elements == 'string' ? elements.split(' ') : elements;
082   }
083    
084     /**
085 * Returns the data associated to the given document
086 * @private
087 * @param {Document} ownerDocument The document.
088 * @returns {Object} An object of data.
089 */
090   function getExpandoData(ownerDocument) {
091     var data = expandoData[ownerDocument[expando]];
092     if (!data) {
093         data = {};
094         expanID++;
095         ownerDocument[expando] = expanID;
096         expandoData[expanID] = data;
097     }
098     return data;
099   }
100  
101   /**
102 * returns a shived element for the given nodeName and document
103 * @memberOf html5
104 * @param {String} nodeName name of the element
105 * @param {Document} ownerDocument The context document.
106 * @returns {Object} The shived element.
107 */
108   function createElement(nodeName, ownerDocument, data){
109     if (!ownerDocument) {
110         ownerDocument = document;
111     }
112     if(supportsUnknownElements){
113         return ownerDocument.createElement(nodeName);
114     }
115     if (!data) {
116         data = getExpandoData(ownerDocument);
117     }
118     var node;
119  
120     if (data.cache[nodeName]) {
121         node = data.cache[nodeName].cloneNode();
122     } else if (saveClones.test(nodeName)) {
123         node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();
124     } else {
125         node = data.createElem(nodeName);
126     }
127  
128     // Avoid adding some elements to fragments in IE < 9 because
129     // * Attributes like `name` or `type` cannot be set/changed once an element
130     // is inserted into a document/fragment
131     // * Link elements with `src` attributes that are inaccessible, as with
132     // a 403 response, will cause the tab/window to crash
133     // * Script elements appended to fragments will execute when their `src`
134     // or `text` property is set
135     return node.canHaveChildren && !reSkip.test(nodeName) ? data.frag.appendChild(node) : node;
136   }
137  
138   /**
139 * returns a shived DocumentFragment for the given document
140 * @memberOf html5
141 * @param {Document} ownerDocument The context document.
142 * @returns {Object} The shived DocumentFragment.
143 */
144   function createDocumentFragment(ownerDocument, data){
145     if (!ownerDocument) {
146         ownerDocument = document;
147     }
148     if(supportsUnknownElements){
149         return ownerDocument.createDocumentFragment();
150     }
151     data = data || getExpandoData(ownerDocument);
152     var clone = data.frag.cloneNode(),
153         i = 0,
154         elems = getElements(),
155         l = elems.length;
156     for(;i<l;i++){
157         clone.createElement(elems[i]);
158     }
159     return clone;
160   }
161  
162   /**
163 * Shivs the `createElement` and `createDocumentFragment` methods of the document.
164 * @private
165 * @param {Document|DocumentFragment} ownerDocument The document.
166 * @param {Object} data of the document.
167 */
168   function shivMethods(ownerDocument, data) {
169     if (!data.cache) {
170         data.cache = {};
171         data.createElem = ownerDocument.createElement;
172         data.createFrag = ownerDocument.createDocumentFragment;
173         data.frag = data.createFrag();
174     }
175  
176  
177     ownerDocument.createElement = function(nodeName) {
178       //abort shiv
179       if (!html5.shivMethods) {
180           return data.createElem(nodeName);
181       }
182       return createElement(nodeName, ownerDocument, data);
183     };
184  
185     ownerDocument.createDocumentFragment = Function('h,f','return function(){' +
186       'var n=f.cloneNode(),c=n.createElement;' +
187       'h.shivMethods&&(' +
188         // unroll the `createElement` calls
189         getElements().join().replace(/\w+/g, function(nodeName) {
190           data.createElem(nodeName);
191           data.frag.createElement(nodeName);
192           return 'c("' + nodeName + '")';
193         }) +
194       ');return n}'
195     )(html5, data.frag);
196   }
197  
198   /*--------------------------------------------------------------------------*/
199  
200   /**
201 * Shivs the given document.
202 * @memberOf html5
203 * @param {Document} ownerDocument The document to shiv.
204 * @returns {Document} The shived document.
205 */
206   function shivDocument(ownerDocument) {
207     if (!ownerDocument) {
208         ownerDocument = document;
209     }
210     var data = getExpandoData(ownerDocument);
211  
212     if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) {
213       data.hasCSS = !!addStyleSheet(ownerDocument,
214         // corrects block display not defined in IE6/7/8/9
215         'article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}'+
216         // adds styling not present in IE6/7/8/9
217         'mark{background:#FF0;color:#000}'
218       );
219     }
220     if (!supportsUnknownElements) {
221       shivMethods(ownerDocument, data);
222     }
223     return ownerDocument;
224   }
225  
226   /*--------------------------------------------------------------------------*/
227  
228   /**
229 * The `html5` object is exposed so that more elements can be shived and
230 * existing shiving can be detected on iframes.
231 * @type Object
232 * @example
233 *
234 * // options can be changed before the script is included
235 * html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false };
236 */
237   var html5 = {
238  
239     /**
240 * An array or space separated string of node names of the elements to shiv.
241 * @memberOf html5
242 * @type Array|String
243 */
244     'elements': options.elements || 'abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video',
245  
246     /**
247 * current version of html5shiv
248 */
249     'version': version,
250  
251     /**
252 * A flag to indicate that the HTML5 style sheet should be inserted.
253 * @memberOf html5
254 * @type Boolean
255 */
256     'shivCSS': (options.shivCSS !== false),
257  
258     /**
259 * Is equal to true if a browser supports creating unknown/HTML5 elements
260 * @memberOf html5
261 * @type boolean
262 */
263     'supportsUnknownElements': supportsUnknownElements,
264  
265     /**
266 * A flag to indicate that the document's `createElement` and `createDocumentFragment`
267 * methods should be overwritten.
268 * @memberOf html5
269 * @type Boolean
270 */
271     'shivMethods': (options.shivMethods !== false),
272  
273     /**
274 * A string to describe the type of `html5` object ("default" or "default print").
275 * @memberOf html5
276 * @type String
277 */
278     'type': 'default',
279  
280     // shivs the document according to the specified `html5` object options
281     'shivDocument': shivDocument,
282  
283     //creates a shived element
284     createElement: createElement,
285  
286     //creates a shived documentFragment
287     createDocumentFragment: createDocumentFragment
288   };
289  
290   /*--------------------------------------------------------------------------*/
291  
292   // expose html5
293   window.html5 = html5;
294  
295   // shiv the document
296   shivDocument(document);
297  
298 }(this, document));

然后把html5shiv.js在head里面引入：

01 <!DOCTYPE HTML>
02 <html lang="en-US">
03     <head>
04         <meta charset="UTF-8">
05         <title></title>
06         <script type="text/javascript" src="html5.js"></script>
07         <style type="text/css">
08             nav {
09                 width:200px;
10                 height:100px;
11                 background:#f12;
12             }
13         </style>
14     </head>
15     <body>
16         <nav>Springload</nav>Springload
17     </body>
18 </html>

在IE8中打开查看你就会发现nav这个HTML5元素标签，可以正常使用和显示。

标签: , , 没有评论
   

支持博主

了解慈善捐款计划

关于邵珠庆博客

文章标签

API GA Git Google Analytics HTML5 jquery JS Linux MySQL nginx PHP SaaS web 互联网 代码 使用 分析 创业 原理 命令 好东西 如何 工具 常用 开发 总结 技巧 技术 插件 数据 文件 方法 时间 架构 框架 汇总 百度 管理 系统 网站 网站分析 设计 详解 问题 阿里云

记事邵珠庆博客

1、Web前端网址导航
2、邵珠庆极客筛站
3、识别移动设备访问代码


最近文章

最近评论

博客日历

2013年6月
一 二 三 四 五 六 日
« 5月   7月 »
 12
3456789
10111213141516
17181920212223
24252627282930

目录分类

文章归档

博客功能