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

45

HTML：

<head>
    <script src="Scripts/Generate.js"></script>
</head>

脚本/Generate.js：

if(!document.getElementById('id1')) {
    var script = document.createElement('script');
    script.id = 'id1';
    script.src = 'Scripts/Script1.js';
    document.head.appendChild(script);
}
if(!document.getElementById('id2')) {
    var link = document.createElement('link');
    link.id = 'id2';
    link.rel = 'stylesheet';
    link.href = 'CSS/Css1.cs';
    document.head.appendChild(link);
}

之后，HTML是：

 <head>
    <script src="Scripts/Generate.js"></script>
    <script id="id1" src="Scripts/Script1.js"></script>
    <link id="id2" rel="stylesheet" href="CSS/Css1.cs">
</head>
于 2013-10-30T03:42:14.960 回答
9

最简单的方法是这样的：

> document.head.innerHTML += '<link rel="stylesheet" type="text/css" href="styles.css" />';
于 2018-11-18T15:16:01.270 回答
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');

新元素不必添加到头部，只需使用document.write立即写入或附加到正文（或任何其他可以具有除 HTML 和文档元素之外的子节点的元素）。链接元素可能应该在头脑中。

编辑

根据 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 回答