ドキュメント オブジェクトとウィンドウ オブジェクトの位置の違い
ドキュメント オブジェクトのロケーション取得ステップは、この関連するグローバル オブジェクトのロケーション オブジェクトを返すことです。これが完全にアクティブな場合は、それ以外の場合は null です。
Window オブジェクトの位置取得ステップは、その位置オブジェクトを返すことです。各 Window オブジェクトは、Window オブジェクトの作成時に割り当てられた Location オブジェクトの一意のインスタンスに関連付けられています。
位置
ロケーション オブジェクトは、関連付けられたドキュメントの URL の表現と、関連付けられたナビゲート可能なファイルをナビゲートおよびリロードするためのメソッドを提供します。
物件概要
| 属性名 | 価値 |
|---|---|
| href | ロケーション オブジェクトの URL を返します。特定の URL に移動するように設定できます |
| 元 | ロケーション オブジェクトの URL の起点を返します |
| プロトコル | ロケーション オブジェクトの URL のスキームを返します。スキームを変更して同じ URL に移動するように設定できます。 |
| ホスト | Location オブジェクトの URL のホストとポート (スキームのデフォルト ポートと異なる場合) を返します。変更されたホストとポートと同じ URL に移動するように設定できます。 |
| ホスト名 | ロケーション オブジェクトの URL のホストを返します。変更されたホストで同じ URL に移動するように設定できます |
| ポート | ロケーション オブジェクトの URL のポートを返します。ポートを変更して同じ URL に移動するように設定できます |
| パス名 | ロケーション オブジェクトの URL へのパスを返します。変更されたパスで同じ URL に移動するように設定できます |
| 検索 | 場所オブジェクトの URL を返すクエリ (空でない場合は先頭の "?" を含む)。クエリを変更して同じ URI に移動するように設定できます |
| ハッシュ | Location オブジェクトの URL フラグメントを返します (空でない場合は先頭の「#」を含む)。変更されたフラグメントで同じ URL に移動するように設定できます |
| 割り当て(URL) | 指定された URL に移動します |
| 置換(URL) | セッション履歴から現在のページを削除し、指定された URL に移動します |
| リロード() | 現在のページを再読み込みします。 |
| 祖先起源 | 祖先のナビゲート可能なアクティブ ドキュメントのオリジンをリストする DOMStringList オブジェクトを返します |
基本的な例
location.href: ロケーション オブジェクトの URL を返します。特定の URL に移動するように設定できます
console.log(location.href);
location.protocol: ロケーション オブジェクトの URL のスキームを返します。スキームを変更して同じ URL に移動するように設定できます。つまり、現在の URL を返すプロトコルです。
console.log(location.protocol);
location.host: Location オブジェクトの URL のホストとポート (スキームのデフォルト ポートと異なる場合) を返します。変更されたホストとポートと同じ URL に移動するように設定できます。
console.log(location.host);
location.hostname: ロケーション オブジェクトの URL のホストを返します。変更されたホストで同じ URL に移動するように設定できます
console.log(location.hostname);
location.port: ロケーション オブジェクトの URL のポートを返します。ポートを変更して同じ URL に移動するように設定できます
console.log(location.port);
URL は http://localhost:8088/ で、戻り値
location.hash: Location オブジェクトの URL フラグメントを返します (空でない場合は、先頭の "#" を含みます)。変更されたフラグメントで同じ URL に移動するように設定できます
console.log(location.hash);
URL は http://localhost:8088/#index、戻り値
location.search: | ロケーション オブジェクトの URL のクエリを返します (空でない場合は、先頭の "?" を含みます)。クエリを変更して同じ URL に移動するように設定できます (先頭の「?」を無視)。
console.log(location.search);
URL は http://localhost:8088/?name=hello で、戻り値は
assign(url): 指定された URL に移動します
<button id="link_btn">点击跳转页面</button>
let linkBtn = document.getElementById('link_btn');
linkBtn.addEventListener('click', () => {
location.assign('http://www.baidu.com');
});
ボタンをクリックすると、Baidu のページにジャンプします。
replace(url): セッション履歴から現在のページを削除し、指定された URL に移動します
let linkBtn = document.getElementById('link_btn');
linkBtn.addEventListener('click', () => {
location.assign('http://www.baidu.com');
});
ボタンをクリックすると、Baidu のページにジャンプしますが、同時に、ブラウザ ナビゲーションの [戻る] ボタンがまだ灰色であることがわかります。現在の URL は、生成された新しいレコードではなく、以前の閲覧レコードを置き換えます。
location.relaod(): 現在のページをリロードします。
let linkBtn = document.getElementById('link_btn');
linkBtn.addEventListener('click', () => {
location.reload();
});
ボタンをクリックすると、現在のページがリロードされます。つまり、現在のページには更新プロセスがあります。
上記は、場所の基本的なプロパティの例です。