スタイルシートを切り替える jQuery Plugin「CssSwitcher」をアップグレードしました。あわせて JavaScript 版もアップグレード。

改良点は二つ。

• ソースの全面見直し。初期設定の仕方を変更しました。
• ブラウザの戻るボタンで前のページに戻る際に、先のページで変更したスタイルシートが反映されない場合の対処

二つ目はブラウザによって挙動が違うのですが、ブラウザで直前まで見ていたページの状態を復元する「Back Forward Cache」が働いているため、スタイルシートが反映されないことが起こっているようです。Firefox ではデフォルトで「Back Forward Cache」がオンの状態。

参考

• Using Firefox 1.5 caching
• 戻るボタンが押された際、ページのJavaScriptを途中の状態から実行させない方法

ページ遷移は、

前ページ --[リンクをクリック]--> 今見ているページ (ここでスタイルシートを変更) --[ブラウザの戻るボタンで戻る]--> 前のページ (あらら、以前のスタイルシートの設定のまま)

これが、

前ページ --[リンクをクリック]--> 今見ているページ (ここでスタイルシートを変更) --[ブラウザの戻るボタンで戻る]--> 前のページ (スタイルシートを変更反映)

になります。

デモサンプル

• jQuery Plugin cssswitcher.js * Mix
• CssSwitcher * Mix

これでいままで抱えていた課題が解決できました。

技術的な課題:

• ブラウザのボタン操作でのページ遷移とブラウザキャッシュ
  ブラウザの戻るボタンでの前のページに戻る際に、先のページで変更したスタイルシートが反映されない場合がある。

スタイルシートを切り替えるjQuery Plugin「CssSwitcher」より

初期設定の仕方を変更しました。

ソースの全面見直しに伴い以下に変更。

var CssSwitcher = {
  // Settings
  cssPath : "http://domain/path/to/css/", // http://domain/path/to/css/
  idList : [ 'layout', 'font', 'color' ], // List up id attribute of 'stylesheet' rel attribute
  // Cookie Settings
  domain : "",
  path : "/",
  expires : 7, // days or a Date object Wdy, DD-Mon-YYYY HH:MM:SS GMT (ex. Fri, 01-Dec-2010 20:40:03 GMT)
  secure : 0, // 0 or 1
...

基本設定

• 「cssPath」スタイルシートファイルのディレクトリパス
• 「idList」スタイルシートのIDリスト、link要素に追加したid名

Cookieの設定を必要に応じて

• 「domain」Webサーバー名
• 「path」パス名
• 「expires」有効期限 日数 または Wdy, DD-Mon-YYYY HH:MM:SS GMT形式
• 「secure」セキュリティ

他の設定と使い方は、従来通りです。以下のページを参考ください。

• jQuery Plugin版「CssSwitcher」
• JavaScript版「CssSwitcher」

Download:

jquery.cssswitcher.js

cssswitcher.js

Changes:

• 0.0.2 2011.06.27 Fix browser cache.
• 0.0.1 2010.09.02 First Release. (jQuery Plugin版)
• 0.0.1 2010.08.13 First Release. (JavaScript版)

Licenses:

Dual licensed under the MIT and GPL licenses.