2014年09月14日

JavaScript から扱う現在の URL ( 移動と再読み込みと情報取得 )

WEB 上のページ間を移動するには、アドレスバーに直接 URL を入力するか、ページ上のリンクをクリックするか、JavaScript で実行される window.open というメソッドが実行されるイベントのあるコントロールを UI 上で操作するか、といういずれかの操作で実現する事ができます。( ブックマークはリンクとおなじです )

window.open は、そもそも JavaScript で行うページ移動のメソッドですが、本来の目的としては、新しいウインドウを開くという処理がデフォルト処理となっています( 第二引数に _self を指定するとそのウインドウ内で移動 )

それに、window.open は移動が一番の目的で、現在の URL の情報を取得する事はできません。そのような目的に適したオブシェクトとして、window.location オブジェクトが存在します。

アドレスバーに直接 URL を入力する

この処理を window.location オブジェクトを使って JavaScript で処理する事ができます。
location = "http://php.net/manual/ja/ini.core.php?param=test#ini.upload-max-filesize";
これを、JavaScript 内で実行すると、右辺に設定された URL がブラウザに表示されます。

他のウインドウの表示場所を変更したい場合は、そのウインドウを参照して、そのウインドウの location オブジェクトを使います

ページをサーバーから再度読み込む

この処理は、WEB アプリケーションとして重要な処理で、location オブジェクトのメソッドで実行します。
location.reload(true);
reload メソッドの引数は、true を指定します。昨今のブラウザはキャッシュの処理に気を使って、true を指定しないでもうまく行く場合がありますが、仕様としては true を指定しないとキャッシュから読み込む事になります。

location オブジェクトの情報

これは、ブラウザのデベロッパーツールで確認できます。上記の URL へ移動した後、各ブラウザのツールでコンソールを開いて、console.dir( location ) で確認する事ができます。

WEBアプリケーションとして特に注意するのは、href と search と hash です。
( location そのものに URL をセットするのと、href にセットするのは同等です )

Google Chrome



IE11




Firefox インスペクタ






【JavaScriptの最新記事】
posted by at 2014-09-14 00:47 | JavaScript | このブログの読者になる | 更新情報をチェックする