代码之家 › 专栏 › 技术社区 › Gideon

如何“启用”IE8中由AJAX调用插入的HTML5元素?

html5 internet-explorer ajax jquery javascript

Gideon · 技术社区 · 16 年前

请看问题底部的解决方案。

IE8(及更低版本)不能很好地处理未知元素(如HTML5元素),人们无法设置它们的样式,也无法访问它们的大多数道具。他们为此采取了许多变通措施,例如: http://remysharp.com/2009/01/07/html5-enabling-script/

HTMLUnknownElement 应该 HTMLGenericElement (在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>

在IE中,您将看到:UPDATE和NEW元素。在任何现代浏览器中,您都会看到更新

5 回复 | 直到 11 年前

Scott Rippey 15 年前

对于IE7中的所有html5问题,我使用 html5shiv 为了适应ajax调用中返回的html5元素,我使用 innershiv .

-- Praveen Gunasekara

mattbasta 16 年前

document.createElement 相反,我们应该让一切变得不同:

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

我不相信你能用这个 .append() 语法(如 .innerHTML += "" )使用HTML5和IE。问题不在于IE使用或显示HTML5元素的能力,而在于它解析这些元素的能力。无论何时以编程方式实例化HTML5元素,您都可以 document.createElement .

jiggybit 15 年前

在使用AJAX从服务器获取一堆包含HTML5元素的HTML时,我也遇到了麻烦。html5shiv无法拯救我的一天。我的项目模板基于 html5boilerplate 和使用 Modernizr 修复IE中的HTML5标记行为<9

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

这里发生的基本情况是:

创建新元素

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

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

现在发生的是:

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

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

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

schellmax 14 年前

请注意,innershiv功能从1.7开始就内置于jquery中 http://blog.jquery.com/2011/11/03/jquery-1-7-released/

Julio Vedovatto 15 年前

只是把这个留给讨论。

该脚本提供了@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);