JavaScript の 3 つの BOM オブジェクト

window オブジェクトは、フォームの URL を取得または設定するための location プロパティを提供し、URL を解析するために使用できます。このプロパティはオブジェクトを返すため、このプロパティを場所オブジェクトとも呼びます。

次に、詳しく見てみましょう。

1. 場所オブジェクト

1. URL

Uniform Resource Locator (URL) は、インターネット上の標準リソースのアドレスです。インターネット上のすべてのファイルには一意の URL があり、その URL には、ファイルの場所とブラウザがファイルに対して行う処理に関する情報が含まれています。

URL の一般的な構文は次のとおりです。

プロトコル://ホスト[:ポート]/パス/[?クエリ]#フラグメント
http://www.itcast.cn/index.html?name=andy&age=18#link

構成	例示する
プロトコル	一般的に使用される通信プロトコルは、http、ftp、maito などです。
ホスト	ホスト（ドメイン名）
ポート	ポート番号はオプションです。省略した場合は、スキームのデフォルトポートが使用されます。たとえば、http のデフォルトポートは 80 です。
パス	パスは、0 個以上の「/」記号で区切られた文字列で、通常はホスト上のディレクトリまたはファイルのアドレスを表すために使用されます。
クエリ	パラメータはキーと値のペアの形式で、&記号で区切られます。
断片	フラグメント#の後のコンテンツは、リンクやアンカーでよく使用されます。

2. 場所オブジェクトのプロパティ

ここに画像の説明を挿入

これらのプロパティを使用して、アドレスバー内の対応する情報を取得できます。次に例を示します。

たとえば、csdn ホームページで、開発者ツール -> コンソールを開き、location と入力すると、location オブジェクトの多くのプロパティと戻り値が表示されます。

ここに画像の説明を挿入

または、対応する属性をコンソールに直接入力して、対応する戻り値を取得することもできます。

ここに画像の説明を挿入

たとえば、ボタンをクリックしてページにジャンプする効果を作成します。

<本文>
    <button>ジャンプ</button>
    <div></div>
    <スクリプト>
        var btn = document.querySelector('ボタン');
        var div = document.querySelector('div');
        var タイマー = 5;
        btn.addEventListener('click',function(){
           時間（）
        })

       var time = setInterval(関数(){
            タイマーが0の場合
                this.location.href = 'https://www.baidu.com'
            }
           それ以外{
                div.innerHTML = 'ページは '+timer+' 秒後にジャンプします'
                タイマー - ;
           }
        },1000);
       
    </スクリプト>
</本文>

実行結果は次のとおりです。

ここに画像の説明を挿入

3. ロケーションオブジェクトのメソッド

ロケーションオブジェクトメソッド	戻り値
場所の割り当て()	hrefと同様に、ページ（リダイレクトページとも呼ばれます）にジャンプできます。
場所を置き換える()	現在のページを置き換えます。履歴は記録されないため、前のページに戻ることはできません。
場所.reload()	ページを再読み込みします。更新ボタンまたは F5 と同じです。パラメータが true の場合、強制的に更新します (ctrl+f5)

たとえば、location オブジェクトメソッドを使用してページにジャンプすることもできます。

 <button>クリックしてジャンプ</button>
    <スクリプト>
        var btn = document.querySelector('ボタン');
        btn.addEventListener('click',function(){
            location.assign('https://www.baidu.com')
        })
    </スクリプト>

ここに画像の説明を挿入

location.assign()メソッドによるジャンプでは 1 ページ戻ることができますが、location.replace() では履歴が記録されないため、1 ページ戻ることはできません。

2. ナビゲーターオブジェクト

ナビゲーターオブジェクトには、ブラウザーに関する情報が含まれています。このオブジェクトには多くのプロパティがありますが、最もよく使用されるのは userAgent です。これは、クライアントからサーバーに送信されたユーザーエージェントヘッダーの値を返します。

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = ""; //携帯電話} else {
    window.location.href = ""; //コンピュータ}

3. 履歴オブジェクト

履歴オブジェクトメソッド	効果
戻る（）	戻る機能
フォワード（）	転送機能
go(パラメータ)	前進と後退機能パラメータが1の場合、1ページ前進します。-1の場合、1ページ戻ります。

たとえば、2 つのページがあり、1 つのボタンを使用して前後に移動する場合は、次に示すように、2 つのページのボタンにそれぞれ forward メソッドと history メソッドをバインドできます。

index.html

<本文>
    <a href="list.html">リストページへ移動</a>
    <button>進む</button>
    <スクリプト>
        var btn = document.querySelector('ボタン');
        btn.addEventListener('click',function(){
            履歴を転送する()
        })
    </スクリプト>
</本文>

list.html

<本文>
    <a href="index.html">メインページに戻る</a>
    <button>戻る</button>
    <スクリプト>
        var btn = document.querySelector('ボタン');
    btn.addEventListener('click',function(){
        履歴.戻る()
    })
    </スクリプト>
</本文>

効果は次のとおりです。

ここに画像の説明を挿入