JavaScript で「innerHTML」を使用するときにスクリプトが確実に実行されるようにするにはどうすればよいですか?

.innerHTML で挿入されたスクリプトの実行

innerHTML を使用して要素にコンテンツを挿入すると、挿入されたコンテンツ内のスクリプトが実行されないという問題が発生する可能性があります。 jQuery または eval を使用した解決策は存在しますが、純粋な JavaScript を使用してこの問題に対処するコードのスニペットを次に示します。

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

この関数は要素と HTML 文字列をパラメータとして受け取ります。要素の innerHTML を指定された文字列に置き換え、HTML 内のスクリプト要素を反復処理します。スクリプト要素ごとに、同じ属性とスクリプト テキストを持つ新しい要素が作成されます。最後に、古いスクリプト要素を新しいものに置き換えます。

この関数を使用するには、要素の innerHTML:

.innerHTML = HTML;    // does *NOT* run <script> tags in HTML
setInnerHTML(<🎝🎝🎝>, HTML); // does run <script> tags in HTML</script>

を設定するだけです。

以上がJavaScript で「innerHTML」を使用するときにスクリプトが確実に実行されるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。