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

innerHTML を使用して挿入されたスクリプトを実行する方法?

innerHTML を使用してコンテンツを要素に挿入する場合、コンテンツ内に含まれるスクリプトは実行できない場合があります。自動的に実行されます。これは、ブラウザが innerHTML を使用して挿入されたスクリプトを評価しないために発生します。

解決策:

これを解決するには、JavaScript を使用して各スクリプト要素を再作成します。手動で変更し、DOM 内の元のスクリプト タグを置き換えます。 ES6 での解決策は次のとおりです:

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 = HTML; // does *NOT* run <script> tags in HTML
setInnerHTML(, HTML); // does run <script> tags in HTML

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