javascript - 如何检查 css/js 资源是否包含在 head 中

Question

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
  <script src="myscript.js"></script>
</head>

我想要一个检查资源是否包含在头部的函数

checkIfHeaderHas('myscript.js'); // would return true
checkIfHeaderHas('mystyle.css'); // would return true
checkIfHeaderHas('mybla.css'); // would return false

但我想知道如何在头部搜索文件名？（如果是 javascript，则在“src”中，如果是 css，则在“href”中）

score 7 · Accepted Answer

我做了一个小功能，可以满足您的需求。它遍历所有<link>和<script>元素，直到找到具有该名称的脚本。如果不是，则返回 false。

function checkIfIncluded(file) {
    var links = document.getElementsByTagName("link");
    for(var i = 0; i < links.length; i++) {
        if (links[i].href.substr(-file.length) == file)
            return true;
    }

    var scripts = document.getElementsByTagName("script");
    for(var i = 0; i < scripts.length; i++) {
        if (scripts[i].src.substr(-file.length) == file)
            return true;
    }

    return false;
}

console.log(checkIfIncluded("mystyle.css"));
console.log(checkIfIncluded("myscript.js"));
console.log(checkIfIncluded("mybla.css"));

活生生的例子

请注意，这不仅会在中找到资源，<head>还会在整个文档中找到。如果你真的需要看看大脑内部，告诉我，我们会想出别的办法。

score 7 · Accepted Answer

如果您使用的是 jQuery，您可能会执行以下操作：

var checkIfHeaderHas = function(fileName) {

    // Start with CSS.
    $.each($("header link"), function() {
        if ($(this).attr("href").toLowerCase() === fileName.toLowerCase())
            return true;
    });

    // Then JavaScript.
    $.each($("header script"), function() {
        if ($(this).attr("src").toLowerCase() === fileName.toLowerCase())
            return true;
    });

    // Default response.
    return false;
}

对任何不完全正确的地方表示歉意。我正在从我的手机中敲出这个，并且没有时间测试。

score 4 · Accepted Answer

在 jquery 中使用 .length 可以解决这个问题。（未经测试！）

只需检查是否存在将 href 属性设置为 CSS 文件 URL 的元素：

if (!$("link[href='/path/to.css']").length){
alert('not loaded');
}else{
alert('loaded!');
}

score 0 · Accepted Answer

这是一个有效的（经过测试的）解决方案：

function checkIfHeaderHas(name) {
  const checks = [
    {attr: 'href', items: $("head link")},
    {attr: 'src', items: $("head script")}
    // add any other if needed...
  ];
  let res = false;
  if (typeof name === 'string') {
    const lc = name.toLowerCase();
    for (let i = checks.length - 1; i >= 0; i--) {
      $.each(checks[i].items, function () {
        if (($(this).attr(checks[i].attr) || '').toLowerCase() === lc) {
          res = true;
          return false; // exit the loop as soon as found
        }
      })
    }
  }
  return res;
}

javascript - 如何检查 css/js 资源是否包含在 head 中

4 回答 4

Related

Reference