innerHTML ajoute dynamiquement du code HTML et des scripts compatibles avec plusieurs compétences de navigateurs

innerHTML ajoute dynamiquement du code HTML et des scripts compatibles avec plusieurs compétences de navigateurs_javascript

WBOY

Libérer： 2016-05-16 16:34:18

original

1141 Les gens l'ont consulté

Symptôme : lors de la définition d'une valeur pour innerHTML d'un élément, si le code HTML fourni contient des scripts js, ces scripts sont souvent invalides, ou ils sont valides sur certains navigateurs mais pas sur d'autres navigateurs.

Cause : différents navigateurs ont différentes manières de gérer les scripts insérés dans innerHTML. Après pratique, cela peut se résumer ainsi :

Pour IE, tout d'abord, la balise script doit avoir l'attribut defer, et deuxièmement, au moment de l'insertion, le nœud auquel appartient innerHTML doit être dans l'arborescence DOM.

Pour Firefox et Opera, le nœud auquel appartient innerHTML ne peut pas être dans l'arborescence DOM au moment de l'insertion.

Sur la base de la conclusion ci-dessus, la méthode de paramétrage général innerHTML est donnée :

Copier le code Le code est le suivant :

/*

* Description : méthode de configuration innerHTML multi-navigateurs 

* Autoriser l'insertion de code HTML contenant un script et un style

* Paramètre : 

* el : nœud dans l'arborescence DOM, définissez son innerHTML

* htmlCode : code HTML inséré 

*Navigateurs testés : ie5, firefox1.5, opera8.5 

*/

var set_innerHTML = fonction (el, htmlCode)

{var ua = navigator.userAgent.toLowerCase();

if (ua.indexOf('msie') >= 0 && ua.indexOf('opera') < 0) 

{htmlCode = 'pour IE
'
htmlCode = htmlCode.replace(/]*)>/gi,'');

el.innerHTML = htmlCode;

el.removeChild(el.firstChild);

>

sinon 

{var el_next = el.nextSibling;

var el_parent = el.parentNode;

el_parent.removeChild(el);

el.innerHTML = htmlCode;

si (el_next)

el_parent.insertBefore(el, el_next)

d'autre

el_parent.appendChild(el);

>

>

Il y a un autre problème avec le code ci-dessus : si le code HTML inséré contient une instruction document.write, cela détruira la page entière. Cette situation peut être évitée en redéfinissant document.write. Le code est le suivant :

Copier le code Le code est le suivant :

/*

Description : Redéfinir la fonction document.write.

Évitez lors de l'utilisation de set_innerHTML, le code HTML inséré contient l'instruction document.write, ce qui endommagerait la page d'origine. 

*/

document.write = function(){

var corps = document.getElementsByTagName('body')[0];

pour (var i = 0; i < arguments.length; i ) {

argument = arguments[i];

if (type d'argument == 'string') {

var el = body.appendChild(document.createElement('div'));

set_innerHTML(el, argument)

>

>

>