{ "title": "IE8的innerHTML BUG修复", "description": "之前的文章中有介绍过一个IE处理innerHTML的BUG。当对元素设置innerHTML时,元素的所有后代节点会被全部断开关联,而不是只有目标元素的子节点受影响。这个特性可以通过removeChild来修复,我们现在要做的是把这个修复直接封装起来实现。", "keywords": "IE8,innerHTML", "content": "  之前的文章中有介绍过一个IE处理innerHTML的BUG。当对元素设置innerHTML时,元素的所有后代节点会被全部断开关联,而不是只有目标元素的子节点受影响。这个特性可以通过removeChild来修复,我们现在要做的是把这个修复直接封装起来实现。
\r\n  下面是测试代码
\r\n\r\n\r\n]]>\r\n  下面是针对IE的修复代码
\r\n\r\n//ie-innerHTML.js\r\nif(/MSIE|Trident/.test(navigator.userAgent))\r\n(function(){\r\n if(window.HTMLElement)tags=[HTMLElement.prototype];\r\n else {\r\n var tags=[\r\n \"Unknown\",\"UList\",\"Title\",\"TextArea\",\"TableSection\",\"TableRow\",\r\n \"Table\",\"TableCol\",\"TableCell\",\"TableCaption\",\"Style\",\"Span\",\r\n \"Select\",\"Script\",\"Param\",\"Paragraph\",\"Option\",\"Object\",\"OList\",\r\n \"Meta\",\"Marquee\",\"Map\",\"Link\",\"Legend\",\"Label\",\"LI\",\"Input\",\r\n \"Image\",\"IFrame\",\"Html\",\"Heading\",\"Head\",\"HR\",\"FrameSet\",\r\n \"Frame\",\"Form\",\"Font\",\"FieldSet\",\"Embed\",\"Div\",\"DList\",\r\n \"Button\",\"Body\",\"Base\",\"BR\",\"Area\",\"Anchor\"\r\n ],html5tags=[\r\n \"abbr\",\"article\",\"aside\",\"audio\",\"canvas\",\"datalist\",\"details\",\r\n \"dialog\",\"eventsource\",\"figure\",\"footer\",\"header\",\"hgroup\",\"mark\",\r\n \"menu\",\"meter\",\"nav\",\"output\",\"progress\",\"section\",\"time\",\"video\"\r\n ];\r\n for(var o,n,i=0;o=window[\"HTML\"+tags[i]+\"Element\"];i++)\r\n tags[i]=o.prototype;\r\n for(i=0;i]+?>|<[^>]+?>\\s*$/g,\"\");\r\n }\r\n }\r\n };\r\n for(i=0;o=tags[i];i++)\r\n for(n in properties)Object.defineProperty(o,n,properties[n]);\r\n})();\r\n\r\n]]>\r\n
\r\n  在IE8+上,使用Object.defineProperty,重新定义innerHTML方法,让它在set时先对元素做一次removeChild。但是由于innerHTML这个方法被覆写了,所以对HTML的读写需要寻找其它方法。比如上面的代码中,写入HTML使用了insertAdjacentHTML,读取HTML使用了outerHTML删除掉外层标签的方式。这些只是比较简单的方法,也许有更厉害的方法来解决这些问题,我就懒得研究了。
", "image": "45425246c5ac149292cdf536db6ee7f5.png", "create_at": "2014-06-21 23:26:54" }