如何在IE 8中“启用”由AJAX调用插入的HTML5元素？

请参阅问题底部的解决方案。

IE 8（及更低版本）不适用于未知元素（即HTML5元素），无法设置样式或访问其大部分道具。 他们为此做了大量的工作，例如： http ： //remysharp.com/2009/01/07/html5-enabling-script/

问题是这对于页面加载时可用的静态HTML非常HTMLUnknownElement ，但是当之后创建HTML5元素时（例如包含它们的AJAX调用，或者只是用JS创建），它会将这些新添加的元素标记为HTMLUnknownElement as应该是HTMLGenericElement （在IE调试器中）。

有没有人知道如何解决这个问题，以便IE 8能够识别/启用新添加的元素？

这是一个测试页面：

      some time 
  $("time").text("WORKS GREAT"); $("body").append("NEW ELEMENT"); //simulates AJAX callback insertion $("time").text("UPDATE");    

在IE中，您将看到：UPDATE和NEW ELEMENT。 在任何其他现代浏览器中，您将看到UPDATE和UPDATE

Answer 1

对于IE7中的所有html5问题，我使用html5shiv并容纳在ajax调用中返回的html5元素我使用innershiv 。

到目前为止，这两个小插件对我来说就像一个魅力。

– Praveen Gunasekara

Answer 2

jQuery有一些创建元素的黑暗，神奇的方式。 而使用document.createElement应该会有所不同：

 var time = document.createElement("time"); time.innerHTML = "WORKS GREAT"; document.appendChild(time); 

我不相信你可以在HTML5和IE中使用.append()语法（如.innerHTML += "" ）。 问题不在于IE使用或显示HTML5元素的能力，而是它能够解析它们。 每次以编程方式实例化HTML5元素时，都必须使用document.createElement 。

Answer 3

使用AJAX从服务器获取大量包含HTML5元素的HTML时，我也遇到了麻烦。 html5shiv无法保存我的一天。 我的项目模板基于html5boilerplate，并使用Modernizr修复IE <9中的HTML5标记行为。阅读此线程后，我得到了预感并设法使我的代码正常工作。

将鲜榨的HTML注入DOM的有问题的代码是：

 var wrapper = $('
') .addClass('wrapper') .html(data.html) .appendTo(wrapper); 

基本上这里发生的是：

1. 创建一个新元素
2. 更新新元素的innerHTML
3. 具有innerHTML的新元素将附加到DOM中的现有元素

将其更改为以下内容可解决我的问题：

 var wrapper = $('
') .addClass('wrapper') .appendTo(el); wrapper.html(data.html); 

现在发生的事情是：

1. 创建一个新元素
2. 空的新元素将附加到DOM中的现有元素
3. 更新新附加元素的innerHTML

现在甚至IE7别无选择，只能显示异步加载的HTML5元素，就像我想要的那样:)

感谢Julio，我会保留您的插件，以备将来需要时使用。 但是现在我很高兴不添加额外DOM操作的开销。

也许这种解决方法也适用于其他人。

Answer 4

请注意，从1.7开始，innershivfunction内置于jquery中http://blog.jquery.com/2011/11/03/jquery-1-7-released/

Answer 5

离开这个有助于讨论。

该脚本规定@Gidon似乎不能在IE8中工作（在两台不同的机器上测试）。 我不得不以另一种方式重新制作jQuery插件，见下文：

 /** * Enable HTML5 Elements on the fly. IE needs to create html5 elements every time. * @author Gidon * @author Julio Vedovatto  * @see http://stackoverflow.com/questions/2363040/how-to-enable-html5-elements-in-ie-that-were-inserted-by-ajax-call */ (function ($) { jQuery.fn.html5Enabler = function () { var element = this; if (!$.browser.msie) return element; $.each( ['abbr','article','aside','audio','canvas','details','figcaption','figure','footer','header','hgroup','mark','menu','meter','nav','output','progress','section','summary','time','video'], function() { if ($(element).find(this).size() > 0) { $(element).find(this).each(function(k,child){ var el = $(document.createElement(child.tagName)); for (var i = 0; i < child.attributes.length; i++) el.attr(child.attributes[i].nodeName, child.attributes[i].nodeValue); el.html(child.innerHTML); $(child).replaceWith(el); }); } } ); }; })(jQuery);