.innerHTML を使用した動的に挿入されたスクリプトの評価 .innerHTML を使用して Web ページにコンテンツを挿入すると、そのコンテンツに が含まれている場合に問題が発生することがあります。要素。これは、これらの要素内のスクリプト コードが自動的に実行されない可能性があるためです。</p> <p>この問題を解決するには、これらのスクリプトを明示的に実行できます。 JavaScript でそれを行う方法を見てみましょう:</p> <p><strong>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">ログイン後にコピー</div></div> <p><strong>使用法:</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">ログイン後にコピー</div></div> <p>このスクリプトは、新しく挿入されたコンテンツを走査し、<script> を見つけます。要素を削除し、新しい <script> を作成します。要素とその属性およびコード。次に、元の <script> を置き換えます。要素にこれらの新しい要素を追加し、スクリプト コードが確実に実行されるようにします。</p>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
