Maison > interface Web > js tutoriel > Pourquoi innerHTML n'exécute-t-il pas les scripts et comment puis-je y remédier ?

Pourquoi innerHTML n'exécute-t-il pas les scripts et comment puis-je y remédier ?

Mary-Kate Olsen
Libérer: 2024-12-25 08:40:10
original
168 Les gens l'ont consulté

Why Doesn't innerHTML Execute Scripts, and How Can I Fix It?

Scripting avec innerHTML : une solution de contournement pour les limitations d'exécution du navigateur

Pour tenter de charger dynamiquement des scripts dans une page Web, les développeurs peuvent utiliser l'outil propriété innerHTML des éléments HTML, tels que

. Cependant, on observe souvent que même si le contenu du script apparaît dans le DOM de la page, il reste inexécuté dans les navigateurs comme Firefox et Chrome.

Pour résoudre ce problème, une méthode récursive a été conçue pour remplacer efficacement les scripts non exécutables. avec des homologues exécutables. Cette méthode, décrite ci-dessous, garantit une exécution fidèle lors de l'insertion via innerHTML :

function nodeScriptReplace(node) {
  if (nodeScriptIs(node)) {
    node.parentNode.replaceChild(nodeScriptClone(node), node);
  } else {
    var i = -1, children = node.childNodes;
    while (++i < children.length) {
      nodeScriptReplace(children[i]);
    }
  }

  return node;
}

function nodeScriptClone(node) {
  var script = document.createElement("script");
  script.text = node.innerHTML;

  var i = -1, attrs = node.attributes, attr;
  while (++i < attrs.length) {
    script.setAttribute((attr = attrs[i]).name, attr.value);
  }
  return script;
}

function nodeScriptIs(node) {
  return node.tagName === 'SCRIPT';
}
Copier après la connexion

Utilisation : En invoquant la méthode nodeScriptReplace() sur l'élément body du document, tous les scripts non exécutables seront remplacés par leur homologues exécutables, permettant une exécution transparente du script :

nodeScriptReplace(document.getElementsByTagName("body")[0]);
Copier après la connexion

Cette technique contourne efficacement les limitations du navigateur concernant l'exécution du script lorsqu'il est inséré via innerHTML, permettant aux développeurs de charger et exécuter dynamiquement des scripts comme vous le souhaitez.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal