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

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

Answer 1

如果您正在使用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;
}

对任何不太正确的事情表示道歉。我正在把它从手机里拿出来，没有时间去测试。

Answer 2

我做了一个小功能，可以做你想要的。它遍历所有<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"));

<强> Live example

请注意，这不仅会找到<head>中的资源，还会查找整个文档中的资源。如果您真的需要查看内部，请告诉我，我们会想到一些东西其他

Answer 3

在jquery中使用.length会对此有用。（未经测试！）

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

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

Answer 4

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

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;
}

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

4 个答案: