Javascript 如何"；启用"；IE 8中由AJAX调用插入的HTML5元素？_Javascript_Jquery_Ajax_Internet Explorer_Html

Javascript 如何"；启用"；IE 8中由AJAX调用插入的HTML5元素？

javascript jquery ajax internet-explorer html

Javascript 如何"；启用"；IE 8中由AJAX调用插入的HTML5元素？,javascript,jquery,ajax,internet-explorer,html,Javascript,Jquery,Ajax,Internet Explorer,Html,请看问题底部的解决方案 IE8（及更低版本）不能很好地处理未知元素（如HTML5元素），人们无法设置它们的样式，也无法访问它们的大多数道具。他们为此采取了许多变通措施，例如：问题是，这对于页面加载时可用的静态HTML非常有效，但是当一个人随后创建HTML5元素时（例如，包含它们的AJAX调用，或者简单地使用JS创建），它会将这些新添加的元素标记为htmlUnknowneElement，就像htmlGenericeElement一样（在IE调试器中）有人知道这方面的解决方法吗，这样新添加的元素

请看问题底部的解决方案

IE8（及更低版本）不能很好地处理未知元素（如HTML5元素），人们无法设置它们的样式，也无法访问它们的大多数道具。他们为此采取了许多变通措施，例如：

问题是，这对于页面加载时可用的静态HTML非常有效，但是当一个人随后创建HTML5元素时（例如，包含它们的AJAX调用，或者简单地使用JS创建），它会将这些新添加的元素标记为

htmlUnknowneElement

，就像

htmlGenericeElement

一样（在IE调试器中）

有人知道这方面的解决方法吗，这样新添加的元素就会被IE 8识别/启用

这是一个测试页面：

<html><head><title>TIME TEST</title>
    <!--[if IE]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
</head>

<body>
    <time>some time</time>
    <hr>
    <script type="text/javascript">
        $("time").text("WORKS GREAT");
        $("body").append("<time>NEW ELEMENT</time>"); //simulates AJAX callback insertion
        $("time").text("UPDATE");
    </script>
</body>
</html>

时间测试
一些时间

$（“时间”）。文本（“效果很好”）；
$（“正文”）。追加（“新元素”）//模拟AJAX回调插入
$（“时间”）。文本（“更新”）；

在IE中，您将看到：UPDATE和NEW元素。

在任何其他现代浏览器中，您都会看到UPDATE，而UPDATE

jQuery有一些黑暗而神奇的创建元素的方法。改用

document.createElement

应该会有很大的不同：

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

我不相信你能在HTML5和IE中使用

.append（）

语法（比如

.innerHTML+=”

）。问题不在于IE使用或显示HTML5元素的能力，而在于它解析它们的能力。无论何时以编程方式实例化HTML5元素，都必须使用

document.createElement

来处理我使用的IE7中的所有HTML5问题，并适应我使用的ajax调用中返回的HTML5元素

到目前为止，这两个小插件对我来说非常有用

Praveen Gunasekara

仅将此内容留给讨论

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

/**
 * Enable HTML5 Elements on the fly. IE needs to create html5 elements every time.
 * @author Gidon
 * @author Julio Vedovatto <juliovedovatto@gmail.com>
 * @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);

/**
*动态启用HTML5元素。IE每次都需要创建html5元素。
*@作者吉登
*@作者胡里奥·韦多瓦托
*@见http://stackoverflow.com/questions/2363040/how-to-enable-html5-elements-in-ie-that-were-inserted-by-ajax-call
*/
（函数（$）{
jQuery.fn.html5Enabler=函数（）{
var元素=这个；
如果（！$.browser.msie）
返回元素；
元。每个(
['abbr'、'article'、'aside'、'audio'、'canvas'、'details'、'figcaption'、'figure'、'footer'、'header'、'hgroup'、'mark'、'menu'、'meter'、'nav'、'output'、'progress'、'section'、'summary'、'time'、'video']，
函数（）{
if（$（元素）.find（此）.size（）>0）{
$（元素）.find（this）.each（函数（k，子函数）{
var el=$（document.createElement（child.tagName））；
对于（var i=0；i

在使用AJAX从服务器获取一堆包含HTML5元素的HTML时，我也遇到了麻烦。html5shiv无法拯救我的一天。我的项目模板基于，用于修复IE<9中的HTML5标记行为。读了这篇文章后，我有了一个预感，并设法让我的代码正常工作

将新压缩的HTML注入DOM的问题代码是：

var wrapper = $('<div />')
    .addClass('wrapper')
    .html(data.html)
    .appendTo(wrapper);

var包装器=$（“”）
.addClass（“包装器”）
.html（data.html）
.附件（包装纸）；

这里发生的基本情况是：

创建新元素

更新新元素的innerHTML

新元素及其innerHTML将附加到DOM中的现有元素

将其更改为以下可修复我的问题：

var wrapper = $('<div />')
    .addClass('wrapper')
    .appendTo(el);
wrapper.html(data.html);

var包装器=$（“”）
.addClass（“包装器”）
.附录（el）；
html（data.html）；

现在发生的是：

创建新元素

空新元素将附加到DOM中的现有元素

新附加元素的innerHTML将更新

现在，即使是IE7也别无选择，只能像我希望的那样显示异步加载的HTML5元素：）

谢谢Julio，我会把你的插件放在手边，以备将来需要。但现在我很高兴不增加额外DOM操作的开销

也许这个变通方法也适用于其他人。

请注意，从1.7开始，jquery内置了innershiv功能

我看到了这一点，但上面的页面只是一个示例，真正的问题在于这些元素是由ajax加载的：$（“#el”）.load（“url”）。所以这里您的解决方法不适用。@Gidon：但是，您再次使用jQuery来进行AJAX调用，对吗？这里的问题似乎是jQuery，而不是AJAX。（免责声明：我可能完全忽略了这一点。）@Gidon：也许您可以创建元素并将值粘贴到其中（而不是通过jQuery传入来创建元素）。jQuery不是IE-HTML5安全的，所以您只需要以这种方式加载它。这确实是唯一的解决方案，但是由于ajax调用返回一整套html，我必须首先解析它，因为document.createElement一次只能处理一个元素，而不是一个集合。我在回答中添加了我的代码。添加HTML5代码不起作用的原因是因为IE缺乏HTML5支持，并且认为HTML5代码无效（如果您的任何标记未关闭，您将拥有相同的代码）。几个月前我也遇到过同样的问题，但很难找到问题的确切原因，尽管这不会花费任何人很长的时间