欢迎来到 jackNEss'窝窝
I like simple mind

HTML5 新标签IE8-下 AJAX后失效以及解决方案

2011年12月05日

HTML5 新标签IE8-下  AJAX后失效以及解决方案

事发经过

在我们用着 HTML5 各种新标签来重新语义化我们的 站点的时候,有没有这样一个情况,啪啪啪,ok完成,F5一看,好 静态页没事,check过后没任何问题之后, 页面交给后台上数据。好了,后台哥把程序上好,告诉我们检查一看,发现 有某些区域内的 CSS样式全没了,而其他的还好好的,样式表也make sure 是成功加载进来的,再看静态页还是好好的,问题出在哪呢?

然后问了后台哥发现,那个丢失样式的模块是通过AJAX进来的,而正好 AJAX里面的内容运用了新标签,就这样,惨案发生了…

问题分析

我们知道,传统浏览器并不支持 HTML5的新标签(IE6,IE7,IE8),为了让这些新标签做到向下兼容,我们采取的措施是写一段JS来激活这些标签:

<!-- html document -->
<head>
...
<!--[if IE]>
<script type="text/javascript" src="http://www.jackness.org/wp-content/themes/JStyle/images/default/blank.png" _src="js/resetHTML5_forIE.js"></script>
<![endif]-->
...
</head>

以下是 resetHTML5_forIE.js 里面的内容

// javascript document
document.createElement("article");
document.createElement("aside");
document.createElement("footer");
document.createElement("header");
document.createElement("nav");
document.createElement("section");
document.createElement("details");
document.createElement("dialog");
document.createElement("output");
document.createElement("time");

引入这段js之后,那么 我们常用的html5 新标签都可以通过这种方式来激活,当然还得给个reset 样式,不然IE8-浏览器统一将这些新标签默认为 行内元素。

让HTML5新标签向下兼容 DEMO地址: http://www.jackness.org/lab/html5-new-tags-unwork/demo01.html

这个的作用就是让浏览器对新标签预渲染一次使得浏览器支持,但是 为什么AJAX 不行呢,经过分析,AJAX 抛开 与后台的数据交换,实质就是将一个带有标签的字符串通过innerHTML 的方式写入到目标对象,等价于:

//javascript document
a.innerHTML = "<section class=\"tags\">jackNEss'demo</section>"

然后经试验,凡是通过innerHTML而获得的数据,里面的新标签统一不支持,即使你用了 html5reset把标签激活了一次也没用。

这个问题重现的 DEMO地址:http://www.jackness.org/lab/html5-new-tags-unwork/demo02.html

解决方案

我们通过引入一个innershiv.js并调用,作者地址:点击这里

这段js的原理大概是把你innerHTML的内容重现渲染成一个个的元素然后通过appendChild方式插入到目标对象里面,这里就不多说了。

演示地址:http://www.jackness.org/lab/html5-new-tags-unwork/demo03.html


PS:而这个问题,如果你的 AJAX是通过 JQuery里面提供的方法实现的话,恭喜你,从JQuery1.7开始,这个问题已经得以修复,无需调用此JS了,作者原话:“You don’t need to anymore!innerShiv-like functionality is built into jQuery as of 1.7!”

分类bug整理
阅读 1,798
  • 评论加载中...

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS