靠谱的软件下载站
当前位置:  IEfans/IE专区/IE相关/HTML5标签在低版本IE上innerHTML的问题

HTML5标签在低版本IE上innerHTML的问题

IE相关 互联网 2014-03-30 阅读(2116)
在低版本IE浏览器上要使文档能够解析其它标签就必须先对文档执行一次createElement。但这样的操作是针对文档的,对于不在文档中的标签,即使文档已经create了相应的标签,使用innerHTML获其它方式直接操作HTML时那些新的标签依然不会被解析。 比如我们这么做

此SECTION解析时文档还没创建SECTION标记
此SECTION解析时文档已经创建SECTION标记
只有在HTML文本解析之前它的容器所在的文档已经创建了相应的元素时才会解析。那么我们只要把上面代码的步骤换一下就可以解析了

但是也许这么做不是我们想要的,因为有时候我们不想让这个元素被放入文档,而是创建出来备用的。这时候可以使用文档片段来操作,文档片段上也有createElement这个方法。

从元素上获取的HTML通常未必会和原始源中的HTML完全相同。当我们访问innerHTML的时候,得到的HTML是程序生成的。虽然这样得到的内容都是标准的HTML,解析也不会出错,但如果作为解析之外的用途就可能会出问题。有时我们可能要另写程序来统一它。 比如一个很简单的代码



第一张截图是来自IE8的,它让标签名全都使用大写字母,属性的顺序也是乱的,甚至对于一些内置属性都不带引号的,对于的空格也会被吞掉,还有自结束标签最后的斜杠也会吞掉。低版本IE中得到的innerHTML乱得简直难以阅读!第二张Chrome上的截图情况会乐观一些,但对于属性中多余的空格和自结束标签的斜杠也依然会被吞掉。总之,他们都不是原始源。 我们可以用正则表达式来匹配这些HTML属性,并统一它的样式。但对于低版本IE吞掉空格的情况要怎么办呢?其实并不是所有时候都会吞空格的,空格有时候也对布局产生影响,比如white-space属性为pre的时候。于是我们可以给元素赋予这个样式之后再访问innerHTML。但由于CSS渲染是在JavaScript执行完成后才生效的,所以这么做的话获取HTML就无法同步完成了,但这影响并不大。另外我们也不能直接操作文档里的元素,因为添加了这个样式之后页面会发生改变。于是我们创建一个新元素,并把旧节点拷贝过来。



a - b - c
这个例子在IE8上测试就保留下了文本中的换行和空,并且我们还对属性做了排序。当然上面的代码只是随手写的,也许还有很多情况没考虑到,我只提供一个思路,具体的解决方法可能更复杂。

标签:HTML5IE Web

Copyright © 1998-2017 www.iefans.net All Rights Reserved 湘ICP备13012168号-17