Wie führe ich über .innerHTML hinzugefügte Inline-Skripte aus?

Ausführen von über .innerHTML eingefügten Inline-Skripten

F: Wie kann ich mithilfe der .innerHTML-Eigenschaft in ein Element eingefügte Skripte ausführen?

A: Um über .innerHTML eingefügte Skripte auszuführen, befolgen Sie diese Schritte:

1. Neue Funktion erstellen: Definieren Sie eine Funktion namens setInnerHTML, die zwei Parameter benötigt: das HTML-Element (elm) und den einzufügenden HTML-Inhalt (html).
2. HTML einfügen: Legen Sie das innerHTML des Elements auf das angegebene HTML fest Inhalt.
3. Skriptelemente extrahieren: Rufen Sie ein Array aller <script>-Inhalte ab. Elemente innerhalb des geänderten HTML-Inhalts.</script>

4. Über Skripte iterieren: Schleife durch das <script> Elemente und führen Sie die folgenden Schritte für jedes Skript aus:</script>

   • Erstellen Sie ein neues Element (newScriptEl).
   • Kopieren Sie die Attribute aus dem ursprünglichen <script> Element zum neuen.</script>
   • Erstellen Sie einen Textknoten, der das innerHTML des ursprünglichen <script> enthält. Element und hängen Sie es an das neue Skriptelement an.</script>
   • Ersetzen Sie das ursprüngliche <script> Element im DOM mit dem neuen.</script>
5. Beispiel: Erweitern Sie die Funktion um ein Beispiel für ihre Verwendung:

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

  // Simplified for clarity (not part of the setInnerHTML function)
  const htmlWithScript = "<script type='"text/javascript"'>alert('test');</script><strong>test</strong>";
  setInnerHTML(document.querySelector('div'), htmlWithScript);
}

6. Verwendung: Um die Funktion zu nutzen, geben Sie einfach das HTML-Element und den HTML-Inhalt an, der das enthält Skripte. Die Skripte werden beim Einfügen in das DOM automatisch ausgeführt.

Diese Technik umgeht die Einschränkungen der direkten Zuweisung zu innerHTML und ermöglicht die erfolgreiche Ausführung von dynamisch eingefügten Inline-Skripten.

Das obige ist der detaillierte Inhalt vonWie führe ich über .innerHTML hinzugefügte Inline-Skripte aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!