innerHTML を使用した後にインライン スクリプトの実行を保証するにはどうすればよいですか?

innerHTML を使用してインライン スクリプトを実行するためのテクニック

innerHTML を使用して Web ページにスクリプトを挿入するには、制限があります。スクリプトは DOM に表示されることがありますが、多くの場合、自動的に実行されません。この問題に対処し、挿入時にスクリプトを実行できるようにするには、特定のメソッドを使用できます。

メソッド: スクリプトを再帰的に置換

このアプローチでは、各インライン スクリプト要素を実行可能な対応物。次のコード スニペットは実装を示しています:

function nodeScriptReplace(node) {
  if (nodeScriptIs(node) === true) {
    node.parentNode.replaceChild(nodeScriptClone(node), node);
  } else {
    var i = -1,
      children = node.childNodes;
    while (++i < children.length) {
      nodeScriptReplace(children[i]);
    }
  }

  return node;
}

function nodeScriptClone(node) {
  var script = document.createElement("script");
  script.text = node.innerHTML;

  var i = -1,
    attrs = node.attributes,
    attr;
  while (++i < attrs.length) {
    script.setAttribute((attr = attrs[i]).name, attr.value);
  }
  return script;
}

function nodeScriptIs(node) {
  return node.tagName === 'SCRIPT';
}

使用例:

nodeScriptReplace(document.getElementsByTagName("body")[0]);

このメソッドは DOM ツリーを再帰的に走査し、インライン スクリプト要素を識別して置換します。実行可能ファイル。スクリプトが期待どおりに実行されることを保証します。

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