Eingefügtes wird ausgeführt Elemente mit .innerHTML</h2> <p>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.</p> <p>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.</p> <p>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.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>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); }); }</pre><div class="contentsignin">Nach dem Login kopieren</div></div> <p>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:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>.innerHTML = HTML; // does *NOT* run `<script>` tags in HTML setInnerHTML(, HTML); // does run `<script>` tags in HTML</pre><div class="contentsignin">Nach dem Login kopieren</div></div>