[JavaScript] 現在のURLやパラメタを取得する方法(Location)

JavaScriptで現在のウェブページのURLを取得する方法の紹介です。
JavaScriptでURLを取得したり、パラメタを取得したりするには、Locationオブジェクトを使います。
URLの取得、ホスト情報の取得、アンカーの取得、パスの取得、パラメタの取得など、基本的なデータの取得方法を記載します。
Contents
locationの使い方と表示結果
以下は「http://www.example.com/sample/test.html?id=7 #ac」というURLからデータを取得するときの例です。
URLの取得(location.href)
1 2 3 4 5 |
var url = location.href; alert(url); //出力 http://www.example.com/sample/test.html?id=7 #ac |
ホストの取得(location.host)
1 2 3 4 5 6 |
var url = location.host; var url = location.hostname; alert(url); //出力 www.example.com |
パスの取得(location.pathname)
1 2 3 4 5 |
var pathname= location.pathname; alert(pathname); //出力 /sample/test.html |
パラメタの取得(location.search)
1 2 3 4 5 |
var search = location.search; alert(search); //出力 ?id=7 |
アンカの取得(location.hash)
1 2 3 4 5 |
var hash = location.hash; alert(hash); //出力 #ac |
ポートの取得(location.port)
1 2 3 4 5 |
var port = location.port; alert(port); //出力 アクセスしているポート番号が出力される。 |
プロトコルの取得(location.protocol)
1 2 3 4 5 |
var protocol= location.protocol; alert(protocol); //出力 http; |
利用例
URLを取得
ボタンをクリックすると alert に URL が表示される例。
1 2 3 4 5 6 7 8 9 10 11 12 |
//XHTML <form name=""> <input type="button" value="URLを取得" onClick="showUrl()"> </form> //Javascript <script type="text/javascript"> function showUrl(){ var url= location.href; alert(url); } </script> |
パスを取得
ボタンをクリックすると alert に パス が表示される例。
1 2 3 4 5 6 7 8 9 10 11 12 |
//XHTML <form name=""> <input type="button" value="パスを取得" onClick="showPath()"> </form> //Javascript <script type="text/javascript"> function showPath(){ var path= location.pathname; alert(path); } </script> |
パラメタを取得・分割
1 2 3 4 5 |
//URLの?以降の文字を取得する var url=location.search.substring(1); //&で文字列を分割する var str=url.split('&'); |
関連記事
- [JavaScript] onClick()を使ってフォームのボタンが押されたときの処理を作る
- [JQuery] Ajaxが使える状態かどうかチェックする方法
- [jQuery] クリックしたリンクURLを取得する方法
- [PHP] PHP Simple HTML DOM Parserでスクレイピング
- [JavaScript] URLのパラメタを簡単に取得する方法(purl.js)