Insérer dynamiquement une chaîne HTML dans le HEAD d'un document

J'ai besoin d'insérer une chaîne HTML dans la balise <head> du document DOM actuel, d'une façon: vous créez un élément div, remplissez son innerHTML, copiez sur l'élément par -Incluez dans votre <head> élément. Mais ces méthodes ne fonctionnent pas dans IE/Opera pour les raisons données ci-dessous, bien que dans FF3 les deux méthodes fonctionnent parfaitement, et le navigateur traite les éléments STYLE/SCRIPT ajoutés.Insérer dynamiquement une chaîne HTML dans le HEAD d'un document

Existe-t-il un autre moyen d'insérer directement une chaîne dans <head> et de traiter ces éléments?

(Pourquoi ils échouent dans IE/Opera)

Méthode 1 - ne réussit pas parce innerHTML ne peut pas analyser/ne tient pas compte META, STYLE, éléments SCRIPT dans la chaîne

insertHtml = function(parentElem,htmlStr){ 

    var frag = document.createDocumentFragment(); 
    var temp = document.createElement('div'); 
    temp.innerHTML = htmlStr; 

    // at this point, temp.childNodes.length=0 

    while (temp.firstChild) { 
     frag.appendChild(temp.firstChild); 
    } 
    // use native DOM methods to insert the fragment 
    parentElem.insertBefore(frag, parentElem.childNodes[0]); 
}

Méthode 2 - Echoue car les éléments STYLE/SCRIPT ajoutés ne sont pas traités par le navigateur

document.getElementsByTagName("head")[0].innerHTML = htmlStr 
// although this populates the <head> tag successfully

Source

2009-05-05 Robin Rodricks

Qu'en est-il si vous utilisez votre première fonction, mais le changement « div » à la « tête »? – Greg

Puis IE/Opera se bloque juste après l'affectation innerHTML. Apparemment, vous ne pouvez pas createElement ('head') !! –

Voici un hack stupide qui résout le problème. Préfixer par une étiquette de chaîne non vide (node.nodeType === 3) au HTMLstr et tout fonctionnera:

var insertHtml = function(parentElem, htmlStr){ 

    var frag = document.createDocumentFragment(); 
    var temp = document.createElement('div'); 
    temp.innerHTML = "hack" + htmlStr; 

    while (temp.firstChild) { 
     if (temp.firstChild.nodeType === 1) { 
      // add only element nodes 
      frag.appendChild(temp.firstChild); 
     } else { 
      // remove the hack string 
      temp.removeChild(temp.firstChild); 
     } 
    } 

    parentElem.insertBefore(frag, parentElem.childNodes[0]); 
}

Source

2009-05-05 13:26:32

Cela fonctionne, mais les éléments STYLE/SCRIPT ajoutés ne sont toujours pas traités par IE7 bien que Opera9/FF3/Safari4 fonctionne correctement. –

J'ai testé dans IE6 et cela a fonctionné. Je vais essayer quand je rentre à la maison avec IE8 et IE8 en mode IE7 pour voir si je peux contourner ces derniers aussi. –

J'ai testé dans les paramètres ci-dessus et il semble fonctionner. Je n'ai pas une installation IE7 pure à tester. –

Insérer dynamiquement une chaîne HTML dans le HEAD d'un document

Répondre

Questions connexes