如何在IE8中「啓用」通過AJAX調用插入的HTML5元素？

請參閱問題底部的解決方案。如何在IE8中「啓用」通過AJAX調用插入的HTML5元素？

對於未知元素（即HTML5元素），IE 8（和更低版本）無法正常工作，無法對它們進行設計或訪問其大部分道具。他們有很多解決這個問題的方法，例如：http://remysharp.com/2009/01/07/html5-enabling-script/

問題是，這對於頁面加載時可用的靜態HTML非常有用，但是當後來創建HTML5元素時（例如包含它們的AJAX調用，或者只是創建與JS），它會將這些新添加的元素標記爲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和新元素。在任何其他現代瀏覽器，你會看到更新和更新

來源

2010-03-02 Gidon

看我如何使用innerShiv和jQuery在HTML 5內容ajaxing博客。 http://tomcoote.co.uk/javascript/ajax-html5-in-ie/ – 2011-03-05 00:15:09

對於IE7中的所有html5問題，我使用html5shiv並且爲了適應使用innershiv的ajax調用返回的html5元素。

到目前爲止，這兩個小插件對我來說很有用。

- 普利文Gunasekara

來源

2010-06-07 06:47:06 Praveen

只是爲了補充HTML5代碼無法工作的原因是因爲IE缺乏HTML5支持，並且認爲HTML5代碼無效（如果您的任何代碼未關閉，您將擁有相同的代碼）。幾個月前我有同樣的問題（http://ilian.i-n-i.org/internet-explorer-jquery-ajax-and-html5/），真的很難找到問題究竟是什麼。 – 2011-06-14 06:49:38

儘管在innershiv項目頁面給出巨大警告後不會花費太長時間，html5shiv項目現在爲innerHTML修改合併了相同的polyfill，因此您不再需要innershiv。 – 2012-09-20 23:34:02

獲救我的一天！現在，您可以使用最新版本的html5shiv，它提供了您需要的所有功能（innershiv已過時）。 – 2014-11-28 13:41:16

jQuery有一些黑暗，神奇的方式來創建元素。使用document.createElement而應使所有的差異：

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

我不相信你可以使用.append()語法（如.innerHTML += ""）與HTML5和IE瀏覽器。問題不在於IE能否使用或顯示HTML5元素，而是它解析它們的能力。任何時候你編程實例化一個HTML5元素，你必須與document.createElement。

來源

2010-03-02 12:35:22 mattbasta

我看到了這個工程，但上面的頁面只是一個例子，真正的問題在於這些元素由ajax加載的事實： $（「＃el」）。load（「url」）。所以這裏你的解決方法不適用。 – Gidon 2010-03-02 13:12:49

@Gidon：但是，你又用jQuery來做你的AJAX調用，對吧？ jQuery似乎是這裏的問題，而不是AJAX。（免責聲明：我可能完全錯過了這一觀點。） – 2010-03-04 20:52:29

@Gidon：也許你可以創建元素並將值粘貼到它們中（而不是通過將元素傳入jQuery來創建元素）。 jQuery不是IE-HTML5安全的，所以你只需要以這種方式加載它。否則，只需堅持使用XHTML。 – mattbasta 2010-03-04 20:57:54

就要離開這個來參與討論。

腳本提供@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);

來源

2011-02-16 12:13:37

取一束包含使用AJAX服務器HTML5元素HTML的時候我也遇到了麻煩。 html5shiv無法挽救我的一天。我的項目模板基於html5boilerplate並使用Modernizr修復IE中的HTML5標記行爲9. 閱讀完此線程後，我得到了一個預感，並設法讓我的代碼正常工作。

注入鮮榨的HTML到DOM有問題的代碼是：

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

基本上這裏所發生的是：

創建一個新元素
新元素的innerHTML是已更新
帶有innerHTML的新元素被附加到DOM中的現有元素

它更改爲以下修復我的問題：

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

什麼現在發生的事情是：

創建一個新元素
空的新元素被添加到現有元素在DOM
新附加元素的innerHTML被更新

現在連IE7別無選擇，只能顯示異步加載HTML5元素，比如我希望它:)

感謝胡里奧，將讓你的插件方便的情況下，我需要它的未來。但現在我很高興不添加額外的DOM操作的開銷。

也許這種解決方法也適用於其他人。

來源

2011-06-29 23:51:19 jiggybit

注意innershiv功能內置到jQuery的爲1.7 http://blog.jquery.com/2011/11/03/jquery-1-7-released/

來源

2011-11-18 10:01:12 schellmax

謝謝，我已經更新瞭解決方案。 – Gidon 2011-11-18 10:49:44

不確定你要爲問題本身添加解決方案。這就是恕我直言的「答案」部分。您可以將最適合您的答案標記爲「已接受」，然後投票選擇替代方案和補充方案。 – schellmax 2011-11-18 11:11:09

我明白你的觀點，但是提供解決方案的人都指出了插件（html5shiv和innershiv）。你只是增加了解決方案，說innershiv現在是jQuery的一部分。不使用jQuery的人仍然會使用innershiv。由於這個答案一直在演變，我認爲在答案中解釋解決方案也是明智的（在這裏發生很多） – Gidon 2011-11-18 12:43:19

如何在IE8中「啓用」通過AJAX調用插入的HTML5元素？

回答

相關問題