シングスブログ

中小企業のマーケティングやブランディングのコンサルティング。事業運営、組織運営のPDCA改善やホームページの制作、ウェブサイト改善などITネット活用を中心にサービスを提供しています。

メニュー

スタイルシートを切り替える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.

シェア

コメントを残す

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

購読