位置オブジェクト

location は最も便利な BOM オブジェクトの 1 つで、現在のウィンドウにロードされているドキュメントに関する情報を提供し、いくつかのナビゲーション機能も提供します。これは、window オブジェクトと document オブジェクトのプロパティの両方です。つまり、window.location と document.location は同じオブジェクトを参照します。その主な機能は次のとおりです。

現在のドキュメントの情報を保存します
ナビゲーション機能
URLの解析

属性

属性名	例	説明する
ハッシュ	＃コンテンツ	URL 内のハッシュパターンのパス、つまり 0 または # の後の文字列を返します。URL がハッシュパターンでない場合は、空の文字列を返します。
ホスト	www.wrox.com:80	サーバーとポート名を返します
ホスト名	www.wrox.com	ポート番号を除いたサーバー名を返します。
href	http://www.wrox.com	完全な URL を返します。location.toString() はこのオブジェクトを返します。
パス名	"/ファイル/"	URL 内のディレクトリまたはファイル名を返します。
ポート	8080	戻りポート番号
プロトコル	http:	戻りプロトコル、通常は http または https
検索	?=JavaScript	通常は ? で終わる URL クエリ文字列を返します。始まり

例

例としてNuggets Address ( https://juejin.cn/search?query=async await&type=0location ) を取り上げます。返されたパラメータを確認できます。

ここに画像の説明を挿入

クエリ文字列パラメータ

後続のクエリパラメータはすべてlocation.search返されますが、それらは常に文字列の形式であり、クエリパラメータを解析する方法はありません。?

location.searchのパラメータ生成ルールは次のとおりです。

スプライシング&パラメータ
フォーマットはname=value
encodeURIComponent()暗号化を使用する

これを行うには、次のように、 URL クエリパラメータによって生成されたルールに従って解析パラメータ関数を作成できます。

function getQueryStringArgs() {
    // 取得要查询的字符串并去掉开头的问号
    var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
        args = {},
        items = qs.length ? qs.split("&"): [],
        item = null,
        name = null,
        value = null,
        //  在for 循环中使用
        i = 0,
        len = items.length;

    // 逐个将每一项目添加到args对象中
    for (i; i < len; i++) {
        item = items[i].split("=");
        name = decodeURIComponent(item[0]);
       value = decodeURIComponent(items[1]);
        if (name.length) {
            args[name] = value
        }
    }
    console.log(args);
    return args;
}

トランプルレコード

mdnでこんな一節を見つけました

最新のブラウザは[URLSearchParams](https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams/get#examples)、[URL.searchParams](https://developer.mozilla.org/zh-CN/docs/Web/API/URL/searchParams#examples)クエリ文字列からクエリパラメータを簡単に解析するためのインターフェイスを提供します。

しかし、それらにはすべて以下のような注意書きがあります。

ここに画像の説明を挿入

したがって、実際には、次のように、コンソールでこれら 2 つの関数を使用してもクエリパラメータを解析できません。
ここに画像の説明を挿入

位置操作

ジャンプ - location.assign()

ブラウザの場所を変更すると、主な使用法はlocation.assign(url)次の 3 つの結果が返されると考えられます。

ウィンドウをトリガーして、指定されたコンテンツurlを
現在のlocationとがurl同じ起源のものではない場合、 SECURITY_ERRORTypeError
無効な型が渡されるとurl、SYNTAX_ERROR型

置換— location.replace()

現在のリソースを置き換えます。[assign()](https://developer.mozilla.org/zh-CN/docs/Web/API/Location/assign)メソッドreplace()、メソッドを呼び出した後、現在のページはセッション履歴に保存されません。つまり、「戻る」ボタンをクリックして戻ることはできません。

// 语法
object.replace(url);

// 示例
object.replace('http://www.baidu.com');

他の

locationオブジェクトの他のプロパティ ( href、hash、searchなどpathname)を変更することで、現在ロードされているページを変更できます。

// 将url改为http://baidu.com
location.href = 'http://baidu.com';

// 改为http://baidu.com/#section
location.hash = '#section';

// 改为http://baidu.com/?keyword=css
location.search = '?keyword=css';

// 改为http://baidu.com/mydir
location.pathname = 'mydir';

// 改为https://juejin.cn/
location.hostname='juejin.cn'

// 将端口改为8080
location.port = '8080'

location**注意:**プロパティが変更されるたびに(hash例外を除き)、ページが更新されます。
ここに画像の説明を挿入

ページを更新します — location.reload()

現在のページを最も効率的な方法で更新するための主なルールは次のとおりです。

最後のリクエスト以降ページが変更されていない場合、ページはブラウザのキャッシュから再ロードされます。
ページが変更された場合は、サーバーからリロードします

これは主にrequest header更新するかどうかを判断するためのもので、詳しくはブラウザキャッシュの知識を調べる記事を参照してください。

強制的に更新する必要がある場合は、次を使用できますlocation.reload(true)

**注意:**location.reload()ネットワーク遅延やシステムリソースなどの要因によっては、呼び出し後のコードが実行されない場合があります。location.reload()したがって、最後の行を配置するのが最善です

location.toString()

string次のように **URL アドレス全体を ,** の形式で返します。
ここに画像の説明を挿入