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

Comment exécuter des scripts insérés à l'aide de innerHTML ?

Lorsque vous utilisez innerHTML pour injecter du contenu dans un élément, les scripts inclus dans le contenu peuvent ne pas être exécuté automatiquement. Cela se produit parce que les navigateurs n'évaluent pas les scripts après leur insertion à l'aide de innerHTML.

Solution :

Pour résoudre ce problème, vous pouvez utiliser JavaScript pour recréer chaque élément de script. manuellement et remplacez les balises de script d'origine dans le DOM. Voici une solution dans ES6 :

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);
    });
}

Utilisation :

.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!