innerHTML がスクリプトを実行しないのはなぜですか?それを修正するにはどうすればよいですか?

innerHTML を使用したスクリプト: ブラウザ実行制限の回避策

Web ページにスクリプトを動的に読み込もうとする場合、開発者は

などの HTML 要素の innerHTML プロパティ。ただし、スクリプト コンテンツがページの DOM に表示されているにもかかわらず、Firefox や Chrome などのブラウザでは実行されないことがよく観察されます。

この問題に対処するために、実行不可能なスクリプトを効果的に置き換える再帰的方法が考案されました。実行可能な対応物を使用します。以下に概説するこのメソッドは、innerHTML を介した挿入時に忠実な実行を保証します:

function nodeScriptReplace(node) {
  if (nodeScriptIs(node)) {
    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';
}

使用法: ドキュメントの body 要素で nodeScriptReplace() メソッドを呼び出すことにより、すべての実行不可能なスクリプトがそのスクリプトに置き換えられます。実行可能な対応物、シームレスなスクリプト実行を可能にする:

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

この手法は、スクリプト実行に関するブラウザの制限を効果的に回避します。 innerHTML 経由で挿入すると、開発者は必要に応じてスクリプトを動的にロードして実行できます。

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

firefox chrome html for while Property dom this innerHTML issue

声明：

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