.innerHTML の使用時にスクリプトが実行されないのはなぜですか?その修正方法は?

挿入された を実行しています.innerHTML

を含む要素 <script> を含むコンテンツを挿入する場合.innerHTML を使用してタグを要素に追加すると、スクリプトの実行が失敗することがよくあります。この問題は、静的な HTML を挿入する .innerHTML の固有の性質によって発生し、ブラウザーがその中のスクリプトを自動的に評価できなくなります。</script>

この問題に対処するには、挿入された HTML を直接操作して動的プロセスを作成する解決策が必要です。これは、ブラウザの <script> のデフォルトの動作を模倣します。 ES6 で書かれた 1 つのアプローチは、外部ライブラリや複雑な DOM 変更を行わずに、純粋な JavaScript を使用することに重点を置いています。すべての <script> を反復処理します。 </script>

このソリューションを使用するには、現在の .innerHTML 割り当てを setInnerHTML の呼び出しに置き換えるだけです。更新されたコードは次のようになります:

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

以上が.innerHTML の使用時にスクリプトが実行されないのはなぜですか?その修正方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。