Javascript 如何在 IE 8 中“启用”由 AJAX 调用插入的 HTML5 元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2363040/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to "enable" HTML5 elements in IE 8 that were inserted by AJAX call?
提问by Gidon
See the solution at the bottom of the question.
请参阅问题底部的解决方案。
IE 8 (and lower) does not work good with unknown elements (ie. HTML5 elements), one cannot style them , or access most of their props. Their are numerous work arounds for this for example: http://remysharp.com/2009/01/07/html5-enabling-script/
IE 8（及更低版本）不适用于未知元素（即 HTML5 元素），无法设置它们的样式，或访问它们的大部分道具。他们有很多解决方法，例如：http: //remysharp.com/2009/01/07/html5-enabling-script/
The problem is that this works great for static HTML that was available on page load, but when one creates HTML5 elements afterward (for example AJAX call containing them, or simply creating with JS), it will mark these newly added elements them as HTMLUnknownElementas supposed to HTMLGenericElement(in IE debugger).
问题是这对于在页面加载时可用的静态 HTML 非常有效，但是当之后创建 HTML5 元素时（例如包含它们的 AJAX 调用，或者只是使用 JS 创建），它会将这些新添加的元素标记HTMLUnknownElement为预期到HTMLGenericElement（在 IE 调试器中）。
Does anybody know a work around for that, so that newly added elements will be recognized/enabled by IE 8?
有没有人知道解决这个问题的方法，以便 IE 8 识别/启用新添加的元素？
Here is a test page:
这是一个测试页面：
<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>
In IE you will see the: UPDATE , and NEW ELEMENT. In any other modern browser you will see UPDATE, and UPDATE
在 IE 中，您将看到： UPDATE 和 NEW ELEMENT。在任何其他现代浏览器中，您都会看到 UPDATE 和 UPDATE
采纳答案by Praveen
for all html5 issues in IE7 i use html5shivand to accommodate the html5 elements coming back in ajax calls i use innershiv.
对于 IE7 中的所有 html5 问题，我使用html5shiv并容纳在 ajax 调用中返回的 html5 元素，我使用innershiv。
these two small plugins worked for me like a charm so far.
到目前为止，这两个小插件对我来说就像一个魅力。
-- Praveen Gunasekara
——普拉文·古纳塞卡拉
回答by mattbasta
jQuery has some dark, magical ways of creating elements. Using document.createElementinstead should make all the difference:
jQuery 有一些黑暗的、神奇的方式来创建元素。使用document.createElement而应使所有的差异：
var time = document.createElement("time");
time.innerHTML = "WORKS GREAT";
document.appendChild(time);
I do not believe you can use the .append()syntax (like .innerHTML += "") with HTML5 and IE. The problem isn't IE's ability to use or display the HTML5 elements, it's its ability to parse them. Any time you programmatically instantiate an HTML5 element, you mustdo it with document.createElement.
我不相信您可以在HTML5 和 IE 中使用.append()语法（如.innerHTML += ""）。问题不在于 IE 使用或显示 HTML5 元素的能力，而在于解析它们的能力。任何时候以编程方式实例化 HTML5 元素时，都必须使用document.createElement.
回答by jiggybit
I too ran into trouble when fetching a bunch of HTML containing HTML5 elements from the server using AJAX. html5shiv wasn't able to save my day. My project template is based on the html5boilerplateand uses Modernizrto fix HTML5 tag behavior in IE < 9. After reading this thread I got a hunch and managed to get my code working.
在使用 AJAX 从服务器获取一堆包含 HTML5 元素的 HTML 时，我也遇到了麻烦。html5shiv 无法挽救我的一天。我的项目模板基于html5boilerplate并使用Modernizr来修复 IE < 9 中的 HTML5 标记行为。阅读此线程后，我有一种预感并设法使我的代码正常工作。
The problematic code injecting the freshly squeezed HTML into the DOM was:
将新压缩的 HTML 注入 DOM 的有问题的代码是：
var wrapper = $('<div />')
.addClass('wrapper')
.html(data.html)
.appendTo(wrapper);
Basically what happens here is:
基本上这里发生的是：
- create a new element
- the innerHTML of the new element is updated
- the new element with its innerHTML is appended to an existing element in the DOM
- 创建一个新元素
- 新元素的innerHTML被更新
- 带有 innerHTML 的新元素被附加到 DOM 中的现有元素
Changing it to the following fixes my problem:
将其更改为以下内容可以解决我的问题：
var wrapper = $('<div />')
.addClass('wrapper')
.appendTo(el);
wrapper.html(data.html);
What happens now is:
现在发生的是：
- create a new element
- the empty new element is appended to an existing element in the DOM
- the innerHTML of the newly appended element is updated
- 创建一个新元素
- 空的新元素被附加到 DOM 中的现有元素
- 新添加的元素的innerHTML被更新
Now even IE7 has no choice but to display asynchronously loaded HTML5 elements like I want it to :)
现在，即使 IE7 也别无选择，只能像我希望的那样显示异步加载的 HTML5 元素:)
Thanks Julio, will keep your plugin handy in case I need it in the future. But for now I am happy not to add the overhead of the extra DOM manipulations.
谢谢 Julio，如果我将来需要它，我会把你的插件放在手边。但是现在我很高兴不添加额外 DOM 操作的开销。
Maybe this workaround works for some other people too.
也许这种解决方法也适用于其他一些人。
回答by schellmax
note that innershiv functionality is built into jquery as of 1.7 http://blog.jquery.com/2011/11/03/jquery-1-7-released/
请注意，从 1.7 http://blog.jquery.com/2011/11/03/jquery-1-7-released/ 开始，innershiv 功能已内置到 jquery 中
回答by Julio Vedovatto
Just leaving this to contribute to the discussion.
只是留下这个来促进讨论。
The script provided that @Gidon seems not working in IE8 (tested on two different machines). I had to remake the jQuery plugin in another way, see below:
该脚本规定@Gidon 似乎在 IE8 中不起作用（在两台不同的机器上测试）。我不得不以另一种方式重新制作 jQuery 插件，见下文：
/**
* Enable HTML5 Elements on the fly. IE needs to create html5 elements every time.
* @author Gidon
* @author Julio Vedovatto <[email protected]>
* @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);
