このところ立て続けに、
Webページ上に初回アクセスのみ動画を表示させたい、
Webページ上に初回アクセスのみモーダルウィンドウを表示させたい、
など、初回アクセス時に処理・制限を変える要望があり、
「jquery.cookie.js」を使ってのクッキー処理にて
それらを制御するサンプルを作ってみたので、
メモ書き程度に紹介してみます。
今回のサンプルでは、
初回アクセス時のみページ上に「初回アクセスです。」の
メッセージテキストを表示するサンプルです。
jQuery Cookie First Access Control
まずは動作サンプルから。
下記のリンクをクリックして表示されるページは、
初回アクセス時のみ、ページ上に「初回アクセスです。」のテキストが表示されます。
※リロードしてアクセスが2回目以降となるとテキストは非表示になります。
≫jQuery Cookie First Access Control【SAMPLE】
中の構成について、
まずHTMLから。
◆HTML <div id="first">初回アクセスです。</div> <p>jQueryでWebページに初回アクセスのみ<br /> 「初回アクセスです。」のテキストを表示するサンプルです。</p>
特にHTMLソース上での重要な項目はないのですが
初回アクセス時に表示する内容をHTML側に記載しておきます。
(今回はCSSは特別な指定は必要にならないので省きます。)
そして、「jquery.cookie.js」を使って
初回アクセスと2回目以降のアクセスでの
処理を変えるスクリプトは以下になります。
◆SCRIPT <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.cookie.js"></script> <script type="text/javascript"> $(function(){ if($.cookie("access")){ $('#first').css({display:'none'}); } $(window).load(function(){ $.cookie("access",$('body').addClass('access')); }) }); </script>
アクセスした際にbodyタグにクラス(class=”access”)を追加し、
「jquery.cookie.js」での処理にてクラス追加の内容をクッキーに保存します。
2回目以降のアクセス時には、クッキーが有るか・無いか、をみて
if文で処理している内容が実行されるようになっています。
このサンプルでは「bodyにクラスを追加する」という処理で判別していますが
クッキーに保存する判別内容はクラス追加でなくても、
どんな制限でも大丈夫だったりします。
初回アクセスかどうか、の判別はクッキー処理になるので
ユーザーがクッキーを削除したら元に戻ります。
併せて、クッキー処理をする際の注意点として
Google Chromeはローカルファイルではクッキーの保存を行わないので
Google Chromeでの動作確認はサーバアップしたデータで確認する必要があります。
サンプルの動作は少々強引なものだったりしますが、
Webページ構造上で、初回アクセスと2回目以降に
別々の処理をする必要があった際のご参考までに。。。
jQuery(JavaScript)でiPhone、iPad、Android向けにアラートを表示してURLをリダイレクト(選択)させる方法 | BlackFlag | 2012.02.23 16:55
[...] 使ってアクセス制御することも可能です。 以前の記事「jQueryで「jquery.cookie.js」を使ってページの初回アクセスのみ処理を変える方法」と 併せる事で、サイトへ初回アクセスのみにアラー [...]
Capli ~かいはつにっき~ » JqueryCookie | 2012.04.01 6:27
[...] 参考サイトはコチラ [...]
こんにちは。
いつも楽しく拝見させていただいております。
「jquery.cookie.js」素晴らしいですね。
ぜひ、利用さえていただきたいと思うのですが、これは1回目(最初)、2回目、3回目などで処理・制限を変えて行くことはjQueryではむずかしいでしょうか?
>Tsukasaさん
コメントありがとうございます。
ご質問いただいた件についてですが
試せてはいないのですが
例えばHTML内のどこかに「rel=”1″」といった
rel属性を使って回数を数える値を設置して
cookie操作時にその値を取得して
「1」の場合は「1」の処理 + 値を「2」に変更
「2」の場合は「2」の処理 + 値を「3」に変更
という指定を与えればいけるのではないかと考えております。
言葉ではちょっと分かりにくいかもしれませんが・・・
お試しください。
よろしくお願いします。
フォームデータ登録後もページスクロール位置を維持する方法を考えてみた | Cyokodog | 2013.08.04 11:06
[...] jQueryで「jquery.cookie.js」を使ってページの初回アクセスのみ処理を変える方法 – BlackFlag /* [...]
jQueryのjquery.cookie.jsで初回アクセス時のみ何かを実行させる方法 | chibicolon【チビコロン】 | 2013.10.22 11:23
[...] 参考サイト jQueryで「jquery.cookie.js」を使ってページの初回アクセスのみ処理を変える方法 | BlackFlag [...]