意外とこの方法を紹介してるページが見当たらなかったので、こんな情報もあるよ的な感じで軽く残しておく。
何故この方法を使わなきゃならないのか？
⇒キャッシュがウザいからに他ならない！！ｗｗｗ
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<link rel="stylesheet" href="./jquery-ui-1.10.4.custom.min.css" />
<script src="./jquery-1.11.1.min.js"></script>
<script src="./jquery-ui-1.10.4.custom.min.js"></script>
<link rel="stylesheet" href="./css.css" /> <!-- ←このCSSを編集後にページ再読込しても読んでくれないのです。 -->
<!-- なので仕方ないから… -->
<style type="text/css"></style>
<script>
//外部サーバのファイルを読み込む必要がある場合は、これ必須。
//IEだとページ読み込み前にダイアログが出てウザい。
jQuery.support.cors = true;
//複数のファイルを指定できるように配列に
var css = [
"css.css",
"hoge.css",
"moge.css",
];
var css_src = "";
$(function() {
//styleタグの後ろにscriptタグ書けば、onloadイベントでの実行じゃなくても大丈夫かも。
for (var i in css) {
//同期通信＆キャッシュ無視でCSSファイルを読み込み
$.ajax({
type: "GET",
url: css[i],
async: false,
cache: false,
success: function(data) {
css_src += data;
},
error: function(e) {
console.log(e);
alert("外部CSSファイルの読み込みでエラーが発生しました。\n\n" + css[i]);
}
});
}
//styleタグに読み込んだCSSを埋め込み
$("style").text(css_src);
});
</script>
</head>
<body>
…
</body>
</html>
スクリプトを改造すれば、ページ読み込んだあとに切り替えも可能ですかね。