26

ページの読み込み時にJavascript または DOM ( JQuery ではない) のみを使用して挿入/生成<Script>および<Link>タグ付けすることは可能ですか? また、同様のものを既に追加した場合や、?<Header><Script><Header><Script><Link><Header>

例えば：

前

<Header>
   <script src="Scripts/Generate.js" type="text/javascript"></script>
</Header>

後

<Header>
   <script src="Scripts/Generate.js" type="text/javascript"></script>
   <script src="Scripts/Script1.js" type="text/javascript"></script>
   <script src="Scripts/Script2.js" type="text/javascript"></script>
   <link href="CSS/Css1.css" rel="stylesheet" type="text/css" />
   <link href="CSS/Css2.css" rel="stylesheet" type="text/css" />
</Header>

アドバイスや回答があれば助かります。

4

3 に答える 3

2

「重複」とは、同じ src 属性値を持つことを意味すると思います。これはスクリプトによる重複の追加を防ぐだけなので、他のすべてのスクリプトが追加された後に実行する必要があることに注意してください。

function conditionallyAddBySource(tagName, src) {

  tagName = tagName.toLowerCase();
  var elements = document.getElementsByTagName(tagName);
  var propToCheck = {script:'src', link: 'href'}[tagName];

  for (var i=0, iLen=elements.length; i<iLen; i++) {

    // If find a "matching" element, do nothing
    if (elements[i][propToCheck].indexOf(src) != -1) {
      return;
    }
  }

  // Otherwise, add an element of the required type
  var element = document.createElement(tagName);
  element[propToCheck] = src;
  document.getElementsByTagName('head')[0].appendChild(element);
}

conditionallyAddBySource('script', 'myJSLib.js');

新しい要素は head に追加する必要はなく、 document.writeを使用してすぐに書き込むか、body (または HTML と document 要素以外の子ノードを持つことができるその他の要素) に添付することができます。ただし、リンク要素はおそらく頭にあるはずです。

編集

tagName がscriptであるかlinkであるかに応じて、 src または href をチェックするかどうかを決定します。

Paul の querySelector の提案を使用すると、以下を使用できます。

function conditionallyAddBySource(tagName, src) {

  tagName = tagName.toLowerCase();
  var propToCheck = {script:'src', link: 'href'}[tagName];
  var element = document.querySelector(tagName + '[' + propToCheck + '$="' + src + '"]');

  if (!element) {
    element = document.createElement(tagName);
    element[propToCheck] = src;
    document.getElementsByTagName('head')[0].appendChild(element);
  }
}

querySelector サポートが提供されている場合 (標準モードの IE 8 以降、その他については不明)。

于 2013-10-30T04:00:17.027 に答える