Pourquoi les scripts insérés avec innerHTML ne s'exécutent-ils pas toujours et comment puis-je y remédier ?

Exécuter des scripts insérés avec innerHTML

Insérer des scripts dans une page Web à l'aide de innerHTML peut être un défi, car les scripts peuvent apparaître dans le DOM mais échouer à s’exécuter. Cela est dû aux différentes façons dont les navigateurs gèrent l'exécution des scripts lorsqu'ils sont ajoutés dynamiquement à une page.

Pour surmonter ce problème, une méthode consiste à rechercher de manière récursive dans le DOM des éléments de script et à les remplacer par des clones exécutables. Voici une explication étape par étape de la fonction de remplacement de script récursif :

function nodeScriptReplace(node) {

• Cette fonction prend un nœud comme argument et vérifie s'il s'agit d'un élément de script (c'est-à-dire que son tagName est ' SCRIPT').
• S'il s'agit d'un élément de script, il le remplace par un clone contenant le même code (obtenu via nodeScriptClone()).
• S'il ne s'agit pas d'un élément de script, il recherche récursivement les enfants du nœud pour tout élément de script.

function nodeScriptClone(node) {

• Cette fonction crée un nouveau élément de script avec son texte (code) correspondant au code du nœud de script d'origine.
• Il copie également tous les attributs du nœud d'origine vers le clone pour conserver tous les paramètres tels que l'attribut 'src'.

function nodeScriptIs(node) {

• Cette fonction agit comme une aide pour déterminer si un nœud est un élément de script en vérifiant son tagName.

Exemple d'utilisation :

Pour exécuter des scripts insérés avec innerHTML, appelez la fonction nodeScriptReplace() sur le corps du document (ou tout autre conteneur souhaité).

nodeScriptReplace(document.getElementsByTagName("body")[0]);

En utilisant cette approche récursive, tous les éléments de script rencontrés lors du processus de recherche seront remplacés par des clones exécutables, garantissant ainsi une exécution correcte du script lorsqu'ils sont insérés avec innerHTML. .

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!