スタイルシートを切り替えるjQuery Plugin「CssSwitcher」アップグレード

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

改良点は二つ。

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

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

参考

ページ遷移は、

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

これが、

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

になります。

デモサンプル

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

技術的な課題:

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

スタイルシートを切り替える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」セキュリティ

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

Download:

jquery.cssswitcher.js

cssswitcher.js

Changes:

Licenses:

Dual licensed under the MIT and GPL licenses.

スタイルシートを切り替えるjQuery Plugin「CssSwitcher」アップグレードへの 2 件のコメント

  1. すずき

    CssSwitcherを利用して8年目のものです。
    ブログをhttpからhttpsに変えた際にスプリクトが機能しなくなりました。
    再びhttpに戻すとCssSwitcherは使用できたのですが ページを移動するごとに初期のスタイルシートに戻ってしまうようになりました。
    元の状態(ページを移動してもスタイルシートが変更したまま)に戻す方法はあるのでしょうか

    1. thingsym

      おそらく Mixed Content かと思います。
      HTTPS通信でHTTPが混在するとブラウザはリソースの読み込みをブロックします。

      対処方法は、HTTPS通信に統一してください。
      具体的には

      * HTMLファイルにあるリソースのリンクを全て https://~ にする。
      * CssSwitcherの設定 cssPath を https://~ にする。

      以上で解消するかと思います。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

最近の投稿

カテゴリー

アーカイブ