wake-up-neo.net

So aktivieren Sie HTML5-Elemente in IE 8, die von eingefügt wurden AJAX Anruf?

Siehe die Lösung am Ende der Frage.

IE 8 (und niedriger) funktioniert nicht gut mit unbekannten Elementen (dh HTML5-Elementen), man kann sie nicht stylen oder auf die meisten ihrer Requisiten zugreifen. Hierfür gibt es beispielsweise zahlreiche Umgehungsmöglichkeiten: http://remysharp.com/2009/01/07/html5-enabling-script/

Das Problem ist, dass dies für statisches HTML funktioniert, das beim Laden der Seite verfügbar war. Wenn Sie jedoch anschließend HTML5-Elemente erstellen (z. B. AJAX mit diesen Elementen oder einfach mit JS), werden diese neu markiert fügte Elemente als HTMLUnknownElement hinzu, wie angenommen, HTMLGenericElement (in IE Debugger).

Kennt jemand eine Lösung dafür, damit neu hinzugefügte Elemente von IE 8 erkannt/aktiviert werden?

Hier ist eine Testseite:

<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 sehen Sie: UPDATE und NEW ELEMENT. In jedem anderen modernen Browser sehen Sie UPDATE und UPDATE

javascriptjqueryajaxinternet-explorerhtml5
28
Gidon

für alle HTML5-Probleme in IE7 verwende ich html5shiv und zur Aufnahme der html5-Elemente, die in Ajax-Aufrufen zurückkommen, benutze ich innershiv .

diese beiden kleinen Plugins haben bisher für mich wie ein Zauber gearbeitet.

- Praveen Gunasekara

25
Praveen

jQuery hat einige dunkle, magische Möglichkeiten, Elemente zu erstellen. Die Verwendung von document.createElement sollte den Unterschied ausmachen:

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

Ich glaube nicht, dass Sie die .append()-Syntax (wie .innerHTML += "") mit HTML5 und IE verwenden können. Das Problem ist nicht die Fähigkeit des IE, die HTML5-Elemente zu verwenden oder anzuzeigen, sondern seine Fähigkeit, sie zu analysieren. Jedes Mal, wenn Sie ein HTML5-Element programmgesteuert instanziieren, müssen Sie es mit document.createElement tun.

4
mattbasta

Auch ich hatte Probleme, als ich mit AJAX einen Haufen HTML mit HTML5-Elementen vom Server holte. html5shiv konnte meinen Tag nicht retten. Meine Projektvorlage basiert auf der html5boilerplate und verwendet Modernizr , um das Verhalten des HTML5-Tags in IE <9 zu korrigieren. Nachdem ich diesen Thread gelesen hatte, bekam ich eine Ahnung und habe es gemeistert um meinen Code zum Laufen zu bringen.

Der problematische Code beim Einfügen des frisch gepressten HTML-Codes in das DOM war:

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

Grundsätzlich geschieht hier Folgendes:

  1. erstellen Sie ein neues Element
  2. die innereHTML des neuen Elements wird aktualisiert
  3. das neue Element mit seiner innerHTML wird an ein vorhandenes Element im DOM angehängt

Durch das Ändern auf folgende Probleme wird mein Problem behoben:

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

Was passiert jetzt ist:

  1. erstellen Sie ein neues Element
  2. das leere neue Element wird an ein vorhandenes Element im DOM angehängt
  3. die innerHTML des neu angefügten Elements wird aktualisiert

Jetzt hat sogar IE7 keine andere Wahl, als asynchron geladene HTML5-Elemente anzuzeigen, wie ich es möchte :)

Danke Julio, hält dein Plugin für alle Fälle griffbereit, falls ich es in der Zukunft brauche. Ich bin jedoch froh, den zusätzlichen Aufwand für die zusätzlichen DOM-Manipulationen nicht hinzuzufügen. 

Möglicherweise funktioniert diese Problemumgehung auch für andere Personen.

2
jiggybit

beachten Sie, dass die Innershiv-Funktionalität in jquery ab 1.7 http://blog.jquery.com/2011/11/03/jquery-1-7-released/ integriert ist.

2
schellmax

Lassen Sie dies einfach, um zur Diskussion beizutragen.

Das Skript lieferte, dass @Gidon in IE8 nicht zu funktionieren schien (auf zwei verschiedenen Computern getestet). Ich musste das jQuery-Plugin auf andere Weise neu erstellen, siehe unten:

/**
 * 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);
0
Julio Vedovatto