如何检查 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' 中）

Answer 1

我做了一个小功能，可以做你想要的。 它遍历所有<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>找到资源，还会在整个文档中找到资源。 如果你真的需要看看大脑内部，告诉我，我们会想出别的办法。

Answer 2

如果您使用 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 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 个解决方案

解决方案1
7 2012-05-02 18:29:48

解决方案2
7 2012-05-02 18:38:39

解决方案3
4 已采纳 2012-05-02 18:26:15

解决方案4
0 2020-07-13 17:22:57

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

问题描述

4 个解决方案

解决方案1 7 2012-05-02 18:29:48

解决方案2 7 2012-05-02 18:38:39

解决方案3 4 已采纳 2012-05-02 18:26:15

解决方案4 0 2020-07-13 17:22:57

解决方案1
7 2012-05-02 18:29:48

解决方案2
7 2012-05-02 18:38:39

解决方案3
4 已采纳 2012-05-02 18:26:15

解决方案4
0 2020-07-13 17:22:57