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

Question

我动态地将.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>

我可以在这里查看该文件是否已经在头部或者我是否只是不担心有两个链接？

Answer 1

对链接元素的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
    }
}