Warum werden Skripte bei Verwendung von .innerHTML nicht ausgeführt und wie kann ich das Problem beheben?

Eingefügtes <script> wird ausgeführt Elemente mit .innerHTML</script>

Beim Einfügen von Inhalten, die <script> Tags mithilfe von .innerHTML in ein Element einfügen, können die Skripte häufig nicht ausgeführt werden. Dieses Problem entsteht aufgrund der inhärenten Natur von .innerHTML, das statisches HTML einfügt und Browser daran hindert, darin enthaltene Skripte automatisch auszuwerten.</script>

Um dieses Problem zu beheben, besteht eine Lösung darin, das eingefügte HTML direkt zu manipulieren und so einen dynamischen Prozess zu erstellen das das Standardverhalten des Browsers für <script> nachahmt. Elemente.</script>

Ein in ES6 geschriebener Ansatz konzentriert sich auf die Verwendung von reinem JavaScript, ohne externe Bibliotheken oder komplizierte DOM-Änderungen. Es durchläuft alle <script> Elemente im injizierten Inhalt, wodurch neue Elemente mit denselben Attributen und Textinhalten erstellt werden.</script>

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

Um diese Lösung zu verwenden, ersetzen Sie einfach die aktuelle .innerHTML-Zuweisung durch einen Aufruf von setInnerHTML. Der aktualisierte Code würde wie folgt aussehen:

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

Das obige ist der detaillierte Inhalt vonWarum werden Skripte bei Verwendung von .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!