【教材用サンプル】パラメーターを使って初めてページを開いた時のみ実行する【Javascript】

カテゴリ : html/css, JavaScript, 教材サンプル

Webサイトのトップページなどで初めてページを開いた時のみ何か(例:アニメーションなど)を実行する方法です。

サイトを訪れた回数をcookieで取得することも可能ですが、今回は一度目のみを認識できれば良いのでパラメーターを使って簡単に実装します。

parameter.htmlとparameter2.htmlというファイルで確認をします。(ファイル名は任意です)

locationオブジェクトのsearchプロパティで取得した現在のURLのサーチ情報(?で始まる検索クエリ部分)を変数paramに代入し、変数paramの値が?count=2ではない場合「トップページに初めて訪れました」のアラートを出します。(それ以外の場合はアラートは出しません)

トップページに移動するためのa要素のhref属性に「parameter.html?count=2」と指定することで、二度目以降はURLのサーチ情報に?count=2が付与されます。

これによって2度目以降はアラートが出ず、初めてページを開いた時のみアラートを出すことができます。

parameter.htmlの記述

<!DOCTYPE html>
<html lang="ja" dir="ltr">
 <head>
 <meta charset="utf-8">
 <title>パラメーターの値による条件分岐1</title>
 </head>
 <body>
 <a href="parameter.html?count=2">TOP</a>
 <a href="parameter2.html">別ページに移動</a>
 <script type="text/javascript">
 let param = location.search;
 if(param !== "?count=2"){
 alert("トップページに初めて訪れました");
 //初めて訪れた時の処理を書く
 }
 </script>
 </body>
</html>

 

parameter2.htmlの記述

<!DOCTYPE html>
<html lang="ja" dir="ltr">
 <head>
 <meta charset="utf-8">
 <title>パラメーターの値による条件分岐2</title>
 </head>
 <body>
 <a href="parameter.html?count=2">トップへ戻る</a>
 </body>
</html>

最近の投稿

About Web Site & Key Word

このWebサイトについて&キーワード

■ html,css,JavaScriptなどのweb言語についての解説やメモ、Flash(ActionScript)でゲーム制作を行うための技術紹介、 WordPressを使用したCMS作成のための解説やメモ、アプリ制作の記録や解説やメモ、またそれらにまつわるニュースやブログを掲載します。

■ web制作,CMS制作,ゲーム制作,アプリ制作,
Android,iOS,iPhone,iPad,html,css,JavaScript,Flash,ActionScript,php,cgi,WordPress,Titanium Studio,ブログ,ニュース