2010-12-13 2 views
0

すべての賢明な人に挨拶する! JS/DOMの新機能として、本当にあなたの助けが必要です。私は基本的にクッキーを取得して設定するこのスクリプトを持っていて、特定の要素がトリガーになると、新しいクッキー値を保存してブラウザを更新します。その値はボディクラスに注入されます。しかし、体に新しいクラスを追加する過程で、体に注入された現在のスタイルのCSSを読み込む前に、デフォルトのスタイル(FOUC)を読み込むときに問題に対処しました。クラスを体に注入したときにフラッシュのスタイルが適用されないコンテンツを防ぐ方法

(function ($) {

var Cookies = { 
    init: function() { 
     themes = Cookies.getCookie('THEME'); 
     if (themes != null && themes != '') { 
      document.getElementsByTagName('body')[0].className += ' custom-'+themes; 
     } 
     else { 
      return; 
     } 
    }, 

    setCookie: function (name, value, expired) { 
     var expiredDate = new Date(); 
     expiredDate.setDate(expiredDate.getDate() + expired); 
     document.cookie = name + '=' + escape(value); 
     (expired == null) ? '' : ';expires=' + expiredDate.toUTCString(); 
    }, 

    getCookie: function (name) { 
     if (document.cookie.length > 0) { 
      cookieStart = document.cookie.indexOf(name + '='); 
      if (cookieStart != -1) { 
       cookieStart = cookieStart + name.length + 1; 
       cookieEnd = document.cookie.indexOf(';', cookieStart); 
       if (cookieEnd == -1) { 
        cookieEnd = document.cookie.length; 
       } 
       return unescape(document.cookie.substring(cookieStart, cookieEnd)); 
      } 
     } 
     return ''; 
    } 
}; 

$('.boxer').each(function() { 
    $(this).bind('click', function (e) { 
     e.preventDefault(); 
     var element = $(this).attr('class').replace('boxer', '').replace(' ', ''); 
     setTimeout(function() { 
      Cookies.setCookie('THEME', element, 1); 
      window.location.replace(window.location.href); 
     }, 100); 
    }); 
}); 

$(function() { 
    Cookies.init(); 
}); 

})(jQuery);

どのように私はこの問題を防ぐことができますか?私はすでにリンク要素の前に最初の要素として置いてみましたが、失敗しました。

答えて

0

bodyタグのテーマをブラウザを更新することなく設定してみてください。 jQueryの素晴らしい点の1つは、ページを更新せずに新しいボディクラスを挿入できることです。ただし、それはウェブサイトの残りの部分にとって重要なので、あなたはまだクッキーを設定する必要があります。

ページ間を移動するときには、サーバー側のスクリプト言語を使用して、ブラウザでページを読み込む前に、Cookieを読み込み、bodyタグに適切なCSSクラスを書き込む必要があります。私はあなたが述べてきた理由のためだけではJavaScriptでこれをしようと示唆しています、ページはJavaScriptエンジンがWebで実行できるようになるまで、スタイリングされロードしません

<body <?php if(isset($_COOKIE['THEME'])) { echo 'class="'.$_COOKIE['THEME'].'"'; } ?>> 

:PHPでは、これは次のようになりますブラウザを開き、目的のCSSクラスを追加します。

+0

私はクッキーを呼び出してボディクラスに渡すためにサーバー側を使用する必要があります。 Liamに感謝します。 – fadzril

+0

しかし、もし誰かが別のテクニックとオプションを持っていれば、このスレッドに返信して歓迎します.. :)。私はあなたの意見を読むことに満足しています。 – fadzril

+0

これと同じですが、私はこのテクニックを成功裏に使用しましたが、誰かがこれを達成する別の方法を持っていれば、それが何であるかを読むことに興味があります。 – Liam