Exécution du Éléments avec .innerHTML</h2> <p>Lors de l'injection de contenu contenant <script> balises dans un élément à l’aide de .innerHTML, les scripts ne parviennent souvent pas à s’exécuter. Ce problème survient en raison de la nature inhérente du .innerHTML, qui insère du HTML statique, empêchant les navigateurs d'évaluer automatiquement les scripts qu'il contient.</p> <p>Pour résoudre ce problème, une solution consiste à manipuler directement le HTML injecté, créant ainsi un processus dynamique. qui imite le comportement par défaut du navigateur pour <script> éléments.</p> <p>Une approche, écrite en ES6, se concentre sur l'utilisation de JavaScript pur, sans bibliothèques externes ni modifications compliquées du DOM. Il parcourt tous les fichiers <script> éléments dans le contenu injecté, créant de nouveaux éléments avec les mêmes attributs et le même contenu textuel.</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">Copier après la connexion</div></div> <p>Pour utiliser cette solution, remplacez simplement l'affectation .innerHTML actuelle par un appel à setInnerHTML. Le code mis à jour ressemblerait à :</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">Copier après la connexion</div></div>