Comment garantir l'exécution d'un script en ligne après avoir utilisé innerHTML ?

Techniques d'exécution de scripts en ligne à l'aide de innerHTML

L'insertion de scripts dans une page Web à l'aide de innerHTML a ses limites. Bien que le script puisse apparaître dans le DOM, il ne parvient souvent pas à s'exécuter automatiquement. Pour résoudre ce problème et permettre l'exécution du script lors de l'insertion, certaines méthodes peuvent être utilisées.

Méthode : Remplacer les scripts de manière récursive

Cette approche consiste à remplacer chaque élément de script en ligne par un contrepartie exécutable. L'extrait de code suivant illustre l'implémentation :

function nodeScriptReplace(node) {
  if (nodeScriptIs(node) === true) {
    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';
}

Exemple d'utilisation :

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

Cette méthode parcourt de manière récursive l'arborescence DOM, identifiant et remplaçant les éléments de script en ligne par ceux exécutables, garantissant que les scripts s'exécutent comme prévu.

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!