Comment puis-je m'assurer que les scripts s'exécutent lors de l'utilisation de « innerHTML » en JavaScript ?

Exécution de scripts insérés avec .innerHTML

L'insertion de contenu dans un élément à l'aide de innerHTML peut rencontrer des problèmes où les scripts contenus dans le contenu inséré ne s'exécutent pas. Bien qu'il existe des solutions utilisant jQuery ou eval, voici un extrait de code qui résout ce problème en utilisant du JavaScript pur :

function setInnerHTML(elm, html) {
  elm.innerHTML = html;

  Array.from(elm.querySelectorAll("script"))
    .forEach(oldScriptEl => {
      const newScriptEl = document.createElement("script");

      Array.from(oldScriptEl.attributes).forEach(attr => {
        newScriptEl.setAttribute(attr.name, attr.value);
      });

      const scriptText = document.createTextNode(oldScriptEl.innerHTML);
      newScriptEl.appendChild(scriptText);

      oldScriptEl.parentNode.replaceChild(newScriptEl, oldScriptEl);
  });
}

Cette fonction prend un élément et une chaîne HTML comme paramètres. Il remplace le innerHTML de l'élément par la chaîne fournie et parcourt tous les éléments de script du HTML. Pour chaque élément de script, il en crée un nouveau avec les mêmes attributs et le même texte de script. Enfin, il remplace l'ancien élément de script par le nouveau.

Pour utiliser cette fonction, définissez simplement le innerHTML d'un élément :

.innerHTML = HTML;    // does *NOT* run <script> tags in HTML
setInnerHTML(, HTML); // does run <script> tags in HTML

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!