web-dev-qa-db-ja.com

$ .getScriptですが、jQueryのスタイルシート用ですか？

ありますか $.getScript jQueryでは同等ですが、スタイルシートをロードするためですか？

jquerycssloadstylesheet
25
Lucas

CSSはスクリプトではないため、スクリプトの実行という意味で「実行」する必要はありません。

基本的に、オンザフライで作成されてヘッダーに追加された<link>タグで十分です。

$('<link/>', {
   rel: 'stylesheet',
   type: 'text/css',
   href: 'path_to_the.css'
}).appendTo('head');

または

var linkElem = document.createElement('link');
document.getElementsByTagName('head')[0].appendChild(linkElem);
linkElem.rel = 'stylesheet';
linkElem.type = 'text/css';
linkElem.href = 'path_to_the.css';

jQueryなしで実行したい場合。

ブラウザはDOMの変更に応答し、それに応じてページレイアウトを更新します。

[〜＃〜]編集[〜＃〜]：

私は古いInternet Explorerがこれで問題を抱えていることを読みました。

https://stackoverflow.com/a/2685639/618206

EDIT2：

ファイルのコンテンツを読み取ってインラインで（<style>タグの間に）配置することも有効なソリューションですが、その方法ではCSSはブラウザーによってキャッシュされません。

38
SoonDead

スタイルシートを処理する$.getScriptの代替を作成しました。明白な理由で、私はそれを $。getStylesheet と呼びました。

$.Deferredオブジェクトを実装しています。つまり、次のようにチェーンできます。

$.when($.getStylesheet('css/main.css'), $.getScript('js/main.js'))
.then(function () {
  console.log('the css and js loaded successfully and are both ready');
}, function () {
  console.log('an error occurred somewhere');
});

$。getStylesheet の小さな関数を次に示します。 Github Gistでホストされているだけなので、必要に応じて更新できます。

3
james2doyle

$ .getScriptは実際には単なる別のHTTPリクエストなので、同じメソッド$ .getScriptを使用してスタイルシートを「ダウンロード」できます。しかし、cssは実行可能ではないため、少し配線されます。

2
spiritwalker

以下は、成功または失敗のコールバックでCSSファイルをロードする関数です。 HREFを使用して要素をDOMに挿入すると追加のブラウザー要求が発生するため（この場合、要求は応答ヘッダーによってはキャッシュから送信される可能性があります）、この方法は受け入れられた回答よりも優れていると思います。

function loadCssFiles(urls, successCallback, failureCallback) {

    $.when.apply($,
        $.map(urls, function(url) {
            return $.get(url, function(css) {
                $("<style>" + css + "</style>").appendTo("head");
            });
        })
    ).then(function() {
        if (typeof successCallback === 'function') successCallback();
    }).fail(function() {
        if (typeof failureCallback === 'function') failureCallback();
    });

}

そのように使用：

loadCssFiles(["https://test.com/style1.css", "https://test.com/style2.css",],
    function() {
    alert("All resources loaded");
}, function() {
    alert("One or more resources failed to load");
});

次に、両方のCSS and javascriptファイルをロードする別の関数を示します。

function loadJavascriptAndCssFiles(urls, successCallback, failureCallback) {

    $.when.apply($,
        $.map(urls, function(url) {
            if(url.endsWith(".css")) {
                return $.get(url, function(css) {
                    $("<style>" + css + "</style>").appendTo("head");
                });
            } else {
                return $.getScript(url);
            }
        })
    ).then(function() {
        if (typeof successCallback === 'function') successCallback();
    }).fail(function() {
        if (typeof failureCallback === 'function') failureCallback();
    });

}
1
Willster