Wie kann ich sicherstellen, dass Skripte ausgeführt werden, wenn ich „innerHTML' in JavaScript verwende?

Mit .innerHTML eingefügte Skripte ausführen

Beim Einfügen von Inhalten in ein Element mithilfe von innerHTML können Probleme auftreten, bei denen Skripte innerhalb des eingefügten Inhalts nicht ausgeführt werden. Es gibt zwar Lösungen, die jQuery oder eval verwenden, hier ist ein Codeausschnitt, der dieses Problem mit reinem JavaScript behebt:

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

Diese Funktion verwendet ein Element und eine HTML-Zeichenfolge als Parameter. Es ersetzt das innerHTML des Elements durch die bereitgestellte Zeichenfolge und durchläuft alle Skriptelemente im HTML. Für jedes Skriptelement wird ein neues mit denselben Attributen und demselben Skripttext erstellt. Schließlich ersetzt es das alte Skriptelement durch das neue.

Um diese Funktion zu verwenden, legen Sie einfach den innerHTML:

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

eines Elements fest

Das obige ist der detaillierte Inhalt vonWie kann ich sicherstellen, dass Skripte ausgeführt werden, wenn ich „innerHTML' in JavaScript verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!