.innerHTML 経由で追加されたインライン スクリプトを実行するにはどうすればよいですか?

.innerHTML 経由で挿入されたインライン スクリプトの実行

Q: .innerHTML プロパティを使用して要素に挿入されたスクリプトを実行するにはどうすればよいですか?

A: .innerHTML 経由で挿入されたスクリプトを実行するには、次の手順に従います。手順:

1. 新しい関数の作成: HTML 要素 (elm) と挿入される HTML コンテンツ (html) の 2 つのパラメーターを取る setInnerHTML という関数を定義します。
2. HTML を挿入: 要素の innerHTML を指定された HTML に設定します。 content.
3. スクリプト要素の抽出: すべての <script> の配列を取得します。 </script>

4. スクリプトの反復: <script> をループします。 </script>

   • 新しい <script> 要素を作成し、各スクリプトに対して次の手順を実行します。要素 (newScriptEl).</script>
   • 元の <script> から属性をコピーします。 </script>
   • 元の <script> の innerHTML を含むテキスト ノードを作成します。 </script>
   • 元の <script> 要素を置き換えて、新しい script 要素に追加します。 DOM の要素を新しい要素に置き換えます。</script>
5. Example: 関数を拡張して使用例を含めます:

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

  // Simplified for clarity (not part of the setInnerHTML function)
  const htmlWithScript = "<script type='"text/javascript"'>alert('test');</script><strong>test</strong>";
  setInnerHTML(document.querySelector('div'), htmlWithScript);
}

6. 使用法: この関数を使用するには、HTML 要素を指定するだけです。およびスクリプトを含む HTML コンテンツ。スクリプトは DOM への挿入時に自動的に実行されます。

この手法により、innerHTML への直接割り当ての制限が回避され、動的に挿入されたインライン スクリプトを正常に実行できます。

以上が.innerHTML 経由で追加されたインライン スクリプトを実行するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。