3

.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>

ここにチェックインして、ファイルがすでに先頭にあるかどうかを確認できますか、それとも2つがリンクされていることを心配する必要はありませんか？

4

3 に答える 3

5

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
    }
}
于 2012-05-18T01:00:37.363 に答える
4

他の要素と同様に、これらのリンク要素をクエリできるはずです。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}"]`)
于 2012-05-18T01:20:03.930 に答える
1

私は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);
    }
于 2013-08-21T13:46:43.450 に答える