Warum werden Skripte in innerHTML nicht ausgeführt und wie kann ich das Problem beheben?

Wie führe ich mit innerHTML eingefügte Skripte aus?

Wenn innerHTML zum Einfügen von Inhalten in ein Element verwendet wird, sind im Inhalt enthaltene Skripte möglicherweise nicht enthalten automatisch ausgeführt. Dies liegt daran, dass Browser Skripte nicht auswerten, nachdem sie mit innerHTML eingefügt wurden.

Lösung:

Um dieses Problem zu beheben, können Sie JavaScript verwenden, um jedes Skriptelement neu zu erstellen manuell und ersetzen Sie die ursprünglichen Skript-Tags im DOM. Hier ist eine Lösung in 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);
    });
}

Verwendung:

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

Das obige ist der detaillierte Inhalt vonWarum werden Skripte in innerHTML nicht ausgeführt und wie kann ich das Problem beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!