ホームページ >ウェブフロントエンド >jsチュートリアル >.innerHTML の使用時にスクリプトが実行されないのはなぜですか?その修正方法は?

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

DDD
DDDオリジナル
2024-12-14 17:37:11678ブラウズ

Why Don't Scripts Execute When Using .innerHTML, and How Can I Fix It?

挿入された <スクリプト> を実行しています.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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。