Question

是否可以在页面加载时仅使用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>

任何建议或答案都会对我有帮助。

Answer 1

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>

Answer 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 在标准模式和更高，dunno关于其他人）。

Answer 3

最简单的方法是这样的：

> document.head.innerHTML += '<link rel="stylesheet" type="text/css" href="styles.css" />';

在标头标记内插入脚本和链接标记

3 个答案:

修改