在添加之前检查是否存在 css 引用链接

Check to see if css ref link is present before adding one

本文关键字：存在 css 引用 链接 是否 检查 添加      更新时间：2023-09-26

我正在动态地将.css文件附加到页面。.css文件是否已在链接中是否有关系？如何检查链接是否已存在，我想使用 javascript 检查头部。以下是我附加类的方式：

<script type="text/javascript">
(function(){
    var AppendNewStyle = document.createElement("link");
    AppendNewStyle.setAttribute("href", "/Content/Extras.css");
    AppendNewStyle.setAttribute("rel", "stylesheet");
    AppendNewStyle.setAttribute("type", "text/css");
    $('head')[0].appendChild(AppendNewStyle);
})();
</script>

我可以在这里检查文件是否已经在脑海中，还是我不应该担心有两个链接？

链接元素上对 load 事件的支持模糊，对error事件的支持更糟糕。尽管您可以通过这种方式动态加载它，但此方法并不可靠。

动态加载 CSS 样式的唯一可靠方法是通过 AJAX，利用 AJAX 成功和失败事件，并在成功的 AJAX 之后添加链接。

对于已经加载的样式，您可以检查所有链接元素的所有 url，并将它们与要加载的 CSS 进行比较。

var links = document.getElementsByTagName('link'),
    linksLen = links.length,
    i;
for(i=0;i<linksLen;i++){
    if(links[i].href.indexOf(urlToLoad) !== -1){
        //found
    }
}

您应该能够像任何其他元素一样查询这些链接元素。由于您使用的是 Jquery：

var allLinks = $("link");

此外，您可以使用属性选择器来查找您关心的链接：

var myLink = $('link[href="' + url +'"]');  //Find the link that matches your URL

如果您在低于链接标记应位于位置的脚本标记中执行此操作，则实际上应该不会有任何计时问题。

2017-04 编辑：

模板文字使这更加美味！

var myLink = $(`link[href="${url}"]`)

对于所有讨厌Jquery的人：

var myLinks = document.querySelectorAll(`link[href="${url}"]`)

我正在使用简单的方法来检查css文件是否已存在 如果没有，则通过向css链接提供ID来加载

 var cssSelector = document.getElementById("uiCss");
    // Load UI CSS file
    if (!cssSelector) {
        var filename = 'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css';
        var fileref = document.createElement("link");
        fileref.setAttribute("href", filename);
        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("ID", "uiCss");
        document.getElementsByTagName("head")[0].appendChild(fileref);
    }
相关文章：