Évaluation de scripts insérés dynamiquement à l'aide de .innerHTML L'insertion de contenu dans une page Web à l'aide de .innerHTML peut parfois causer des problèmes si ce contenu inclut éléments. En effet, le code de script contenu dans ces éléments peut ne pas être exécuté automatiquement.</p> <p>Pour résoudre ce problème, nous pouvons exécuter ces scripts explicitement. Explorons comment procéder en JavaScript :</p> <p><strong>Implémentation ES6 :</strong></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><strong>Utilisation :</strong></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>.innerHTML = HTML; // Does not run <script> tags in HTML setInnerHTML(, HTML); // Runs <script> tags in HTML</pre><div class="contentsignin">Copier après la connexion</div></div> <p> Ce script parcourt le contenu nouvellement inséré, localise <script> éléments et crée un nouveau <script> éléments avec leurs attributs et leur code. Il remplace ensuite le <script> éléments avec ces nouveaux, garantissant que le code du script est exécuté.</p>