初心者のJavaScript ロケーション(location) オブジェクト [ ARTEMIS ]

2010年で第二世代携帯がサービス終了。ソフトバンクに乗り換えて安くなった人が７割以上います！

location

locationオブジェクトは、そのウィンドウの現在のURL自体を指します。
URLの構成は一般的に
プロトコル(規則) ＋ホストネーム(ホスト＋ポート) ＋パス
という形になっています。
これらのそれぞれの各部分がプロパティとしてあり
取出したり書き換えたりする事ができます。
また、全体を書き換える事も可能です。

プロパティ

プロトコル(規則) ＋ホストネーム(ホスト＋ポート) ＋パス＋ (# or ?)
プロパティはこれらの全体と各部分です。
ほとんど [R/W] (読み書き可能) なのでその部分だけ変更を加える事ができます。
locationオブジェクトでは値を変えて書き込むと、ジャンプします。
これを使えばメソッドを使わなくてもURLの移動ができます。

location.href	[R/W] URL全体
location.href はそのドキュメントが表示されているウィンドウのURLです。 http://www.artemis.ac/index.html の様なフルURLを読み出せます。 hrefプロパティは書き込みも可能なので location.href = "ジャンプ先URL"; とするとジャンプできます。 JavaScriptで最も一般的に使われている、ページジャンプの方法です。 location オブジェクトはそれ自体がURL全体を指していますので href を省いてしまっても、問題なく動作するようです。とりあえず、私のブラウザ(IE4,IE6,IE7,NN3,NN4.5,NN6,FF2)では問題なく動作します。変数(url) に URLを代入 var url = location.href; var url = location; URLのジャンプ(移動) location.href = ""; location = "";
location.protocol	[R/W] プロトコル部分
プロトコル部分です。一般的なページでは http: と言う値が返りますね。この protocolも R/W(読み書き可能)ですので、書き換える事もできます。一般的に書きかえる状況はないとおもますが、書き換える場合は location.protocol = "ftp:";のようにするとそれ以下のURLは変わらず、プロトコル部分のみ変えた場所へジャンプします。
location.host	[R/W] ホスト名部分
location のホスト名部分です。 www.artemis.ac の様なサーバーを示す文字列だけを取出せます。これも R/W(読み書き可能)ですので、書き換える事もできます。
location.port	[R/W] ポート部分
ポート部分は普段省略されているそうです。( www.artemis.ac:80 の :80の部分) 省略されている時は何も取出せません。これも R/W(読み書き可能)ですので、書き換える事もできるようです。
location.hostname	[R/W] ホスト名＋ポート
ポートが省略されている場合は、host と同じ値になります。私は普段ホストネームはこれで取出しています。これも R/W(読み書き可能)ですので、書き換える事もできます。
location.pathname	[R/W] パス部分
ホストより後ろのパス部分です。一般的なアドレスだと /~artemis/index.html の様な値になりますね。ページ内リンク(#NAME) や CGI等での ?引数の様な呼出しをされた場合はその部分まで含めてパス部分となります。 /~artemis/cgi-bin/bbs/bbs.cgi?NAME="Lime" 等これも R/W (読み書き可能)ですので、書き換える事もできます。パス部分のみの書換えでページジャンプなどができます。私は、個別フレームのページをフレームを通さないで表示すると結構重傷なエラーが出る場合等に使っていました。例えばこのページをページだけ単体で表示するとエラーが出る場合ビジターの為を考えて if(top.location.pathname != "/frame.html") {top.locationpathname = "/frame.html";} 右のページを表示すると、URLは http://www.artemis.ac/mozilla3/javascript/window/wlocation.htm となりトップのパスが frame.htmlではなくなります。この時にトップフレームを frame.htmlへジャンプさせていたわけです。
location.hash	[R/W] #名前の部分
hash はページ内リンクなどの<A NAME="">にジャンプする時に使うパスの中の最後の部分 #top などの部分です。これも R/W(読み書き可能)ですので、書き換える事もできます。読取り書換えの方が使う場合が多いと思います。 location.hash = "TOP"; の様にジャンプ先のアンカーネームを指定します。取出しの時は#TOP のように#も付いてくるのですが書換えの時は#を付けないでいいようです。付けても付けなくても動作するようですが、付けてしまうと Netscapeでは##TOPの様に2重になってロケーションバーに表示されてしまいその後に取出すと ##TOP のように hashの値も 2重になっていました。
location.search	[R/W] ?○○ の部分
サーチ部分はよく Yahoo等で見ると思いますが CGIへ文字列を渡す時などに ? に続けて付け加えて渡します。ですから、CGI以外ではあまり使われ無いと思われやすいですが便利に使う事もできます。例えば自分のページで、複数のページからあるページを呼び出す時などそこから呼び出すリンクに ?値のように付け加えておきます。そうすると ?値によって、どこから呼び出されたかを呼び出されたページのJavaScriptで判断し利用できる事になります。また、ある値をクッキーなどを使わずに別ページへ持ち越す時などに使えると思います。テストの結果では、書き込みをする時には?を付ける必要があるようです。 IEではどちらでも自動で補ってくれますが、Netscapeでは？がつきません。例：index.html と言うページで入室時間をサーチとして付け足します。 location.search = "20:10:10"; 結果(IE) index.html?20:10:10; 結果(NN) index.html20:10:10; この様にNetscapeでは？が付きませんので index.html20:10:10 と言うファイルをサーバー上に探しますので、FileNotFound になります。 location.search = "?20:10:10"; とすれば両方できちんと動作します。この様にNetscapeでは hashとsearchの時に自動で補う補わないがあります気を付けて使ってください。その他には INPUTタグで TYPE="image" の場合例：<INPUT TYPE="image" NAME="IGS" SRC=""> TYPE="image"は画像のクリックされたポジションをファイル名の後に ?IGS.x=25&IGS.y=33 のように値を付けてサーバーに送信されます html拡張子がCGIとして動作しない様にしてあればこの値を末尾に付けてリロードされるだけになります。そこでJavaScriptでこれを利用する事ができるわけです。 IGSが名前ですのでどの画像がクリックされたのか、 xとy でどのポジションがクリックされたのかを取出せます。一般的にはクリッカブルマップタグでやれば良い事ですがこの様にも利用できると言う事です。通常 CGIに ? を付けて引数を渡す時にはエンコードが必要になります。しかし、JavaScriptで利用する為に使う場合はその必要はありません。 JavaScriptはローカルで動作するので、サーチ部分を付け足しそれを受け取る作業は全てローカルマシン内で行われます。ですから、実際にサーバーへ送信されて受け取るわけではないので問題なく、日本語なども使えるはずです。しかしながらページ・ブラウザの文字コードセットの問題で化けた文字として扱われてしまう場合にどうなるかわからないので日本語を ?に付けて渡すのは辞めた方が無難です。どうしても日本語をサーチに付けたい場合はユニコード化するなどして渡した方がよいでしょう。

メソッド

location.reload()	リロードさせる
現在のlocation をリロードします。 Mozilla/3未満では動作しないとの事で、対応できるブラウザをリロードさせる時にのみ使えばいいと思います。 location.reload()が呼び出された時点でページをリロードします。
location.replace()	置換える
location.replace("URL")はジャンプと言うよりは URLのページと置換えてしまいます。ジャンプの場合は普通に履歴(history)に残りますが、置換えは置換え前のページが history に記録されません。私は状況によってこれを使っています。通常はMozilla/3未満の事まで考えるとプロパティの書換えでのジャンプで十分だと思います
location.assign()
あまり意味がわからないのですが、 location.assign("URL") で URLへジャンプします。つまり、通常の location= "URL"や location.href="URL" と同じ事です。 Netscapeではメソッドとしての解説が無かったのですが動作しました。通常のJavaScriptでは Object = "";と言う使い方はできないと思いましたが Objectにassign()を定義しておくとObject= "値"; と記述した時に、自動的にObject.assign("値") と解釈されると言うのをどこかで見た覚えが・・。 location は location = ""; できちんと動作します。 assignは割り当てるとかの意味でしょうから、 assignは実際に使う物ではなく定義されていると言う程度の物なのでしょうか? だからNetscapeではわざわざメソッドとして解説されてないのかもしれないと勝手に解釈してしまいました。(゜ー゜;) 信用しないでください。とにかく普通にジャンプできます。

Tips & Samples

◆わざわざ書く事ではないかもしれませんが。
locationはそのウィンドウの locationです。
ですからフレーム構成の場合に全体をジャンプさせたい時は
きちんと、top.locationの様にどのウィンドウオブジェクトかを
はっきりさせないといけません。
HTMLタグのアンカーは TARGET属性で行いますが
JavaScriptではTARGETをオブジェクトとして指定するわけです。

◆ サンプル１ or.jp → ne.jp

<SCRIPT LANGUAGE="JavaScript">
//簡易版(問題無く動くと思います)
if(location.hostname != "www2.raidway.ne.jp"){
location.hostname = "www2.raidway.ne.jp";
}
//一般版
if(location.hostname = != "www2.raidway.ne.jp"){
location.href = "http://www2.raidway.ne.jp/~artemis/";
}
</SCRIPT>

少し前の時期、プロバイダーが or.jp から ne.jp へと変わった所が
多いと思います。以降期間中は両方使えるようになっています。
このスクリプトを書いておくと、ne.jp以外で来た人を
自動的に同じURLアドレスの ne.jp へジャンプさせます。
ブックマークされる時に、正しい(新)アドレスでされる様にとの配慮です。
or.jpでもne.jpでも同じファイルが表示されますので
METAタグでのrefreshが使えませんのでこうします。
簡易版は、必要なホスト部分のみ交換です。
一般版は、フルパスで、きちんと指定する場合です。

◆ サンプル２一方通行
historyオブジェクトの所でサンプルにした、戻れない迷路分岐を作る時に
Mozilla/3レベル以上のブラウザを対象にする時に replaceを使って見ます。

<SCRIPT LANGUAGE="JavaScript">
function Jump(n){
if(n == 0){location.replace("YESジャンプ先")}
else{ location.replace("NOジャンプ先")}
}
</SCRIPT>
<A HREF="JavaScript:Jump(0)">YES</A>
<A HREF="JavaScript:Jump(1)">NO</A>

これでアンカーをクリックすると、それぞれのページへ置換えをします。
履歴に残らないので戻る事ができません。

◆ サンプル３ CGI補助用特殊な ref の取り方
CGIの補助の話になります。
SSIが禁止されているサーバーでは、一般的にCGIを使ってアクセス解析します。
アクセス解析には、ブラウザや時間、回数、等がありますが
リンクで来た場合に、どこから来たか?(以下Ref)を取る事もできます。
さて、そのページがCGI処理ページ(index.cgi等)であればSSI禁止でも REFは取れます。
しかし、CGIをリンクしてもらう表紙にする事はあまりしないようですし、
CGIが使えるディレクトリが決まっている場合も表紙として使う事はできません。

この場合はJavaScriptのImageオブジェクトをJavaScript内だけで使って、そのSRCとしてCGIを指定します。 CGI側から戻り値がなくても、実際に表示する画像ではないので問題ありません。

<script type="text/javascript">
var img = new Image();
img.src = './cgi-bin/access.cgi?' + document.referrer;
</script>

これでaccess.cgiにrefが渡されますので、後はCGIの方でAgentやIPなどを取って一緒に処理すればOKです。これは直接location.searchとは関係なくdocument.referrer の部類です。

◆ あなたのブラウザ＆このページでの location プロパティ
NN4.5では x、y、target,textなどがあるようですね。

案ずるより産むが易し使ってみれば疑問も解決 XREA+ (plus) 200円/月 ( お試し7日間 ) CORE SERVER 416円/月 ( お試し15日間 ) ロリポップ 263円/月 ( お試し期間10日間 ) チカッパ 500円/月 ( お試し期間15日間 ) ヘテムル 1500円/月 ( お試し期間15日間 ) さくら 125円/月 ( お試し期間2週間 ) 無駄な高額ドメイン管理料金払ってませんか？バリュードメインムームードメイン JavaScript ポケットリファレンス改訂第4版基礎Ajax ＋ JavaScript JavaScript第5版基礎から学べるJavaScript標準コースウェア JavaScriptクイックリファレンス JavaScript，Ajax，DOMによるWebアプリケーションスーパーサンプル図解誰にも教えたくないWeb制作秘密のテクニック200 HTML／JavaScript／CSSホームページ裏ワザ大辞典アフィリエイトの達人養成講座 WebプロフェッショナルのためのCSSとDHTML
2010年で第二世代携帯がサービス終了。ソフトバンクに乗り換えて安くなった人が７割以上います！