タグ別アーカイブ: location

Javascript：セレクトボックス選択時にページ遷移する

Posted on by
返信

セレクトボックスの値を変更した時に、選択した項目によって別のページに遷移（リンク）させたい場合があります。

Javascriptを使用すれば簡単にページ遷移させることが可能です。

JavaScriptのonChangeイベントを使用し、セレクトボックスの値を変更したら指定のリンク先に遷移するという処理を記述すればOKです。

JavaScriptでページ遷移する方法は「location.href」を使用します。
以前に「location.href」の説明を記述しました。下記に記載しています。

Javascript：locationオブジェクトでURL情報を取得する

セレクトボックス optionタグのvalueの値を「location.href」にセットするようにします。

下記に例を記述します。

■ セレクトボックス選択時にページ遷移

onChangeはフォームの入力・選択値が変更された時に処理を行うイベントです。

セレクトボックスに「onChange=”location.href=value;”」を記述します。
optionタグのvalue値に遷移させるURLを指定します。

<select onChange="location.href=value;">
    <option value="">---------</option>
    <option value="sample1.html">サンプル1</option>
    <option value="sample2.html">サンプル2</option>
    <option value="http://www.google.co.jp/">Google</option>
    <option value="http://www.yahoo.co.jp/">Yahoo!</option>
</select>

セレクトボックスの値を変更すると、選択した値のURLに遷移することができます。

たまに使いたい時があるのでメモしておきます。

Javascript：locationオブジェクトでURL情報を取得する

Posted on by
返信

JavascriptでアクセスしているURL情報を取得する場合、
locationオブジェクトを使用すれば簡単に取得することができます。

URL、ホスト名、アンカーなど色々な情報を取得することができます。
また指定したURLに移動することもできます。

下記にlocationオブジェクトの機能や使用例をメモします。

■ locationオブジェクトの機能説明

※下記URLでアクセスした場合
「http://www.hoge.com/location/index.html?aaa=100#test」

「location.href」

現在アクセスしているURLを取得します。
また、指定したURLに遷移します。

・URLを取得

var url = location.href;
alert(url);

【実行結果】

http://www.hoge.com/location/index.html?aaa=100#test

・指定したURLに遷移

location.href = 'http://google.co.jp';

指定したURLに遷移します。

「location.host」
「location.hostname」

現在アクセスしているホスト情報を取得します。

・ホスト情報を取得（host）

var host = location.host;
alert(host);

【実行結果】

www.hoge.com

・ホスト情報を取得（hostname）

var hostname = location.hostname;
alert(hostname);

【実行結果】

www.hoge.com

「location.hash」

現在アクセスしているアンカーを取得します。
また、指定したアンカーに移動します。

・アンカーを取得

var hash = location.hash;
alert(hash);

【実行結果】

#test

「location.port」

現在アクセスしているポート番号を取得します。

「location.protocol」

現在アクセスしているプロトコルを取得します。

var protocol = location.protocol;
alert(protocol);

【実行結果】

http:

「location.pathname」

現在アクセスしているパス情報を取得します。

var pathname = location.pathname;
alert(pathname);

【実行結果】

/location/index.html

「location.search」

現在アクセスしているパラメータ情報を取得します。

var parameter = location.search;
alert(parameter);

【実行結果】

?aaa=100