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

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(){
        履歴.戻る()
    })
    </スクリプト>
</本文>

効果は次のとおりです。

ここに画像の説明を挿入

あるいは、 history.go(1)を使用して前進し、 history.go(1)使用して戻ることもできます。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • JSブラウザBOMの一般的な操作例を詳しく解説
  • JavaScript BOM の説明
  • JavaScript における BOM と DOM の詳細な説明
  • JS での BOM アプリケーション
  • JavaScriptでBOM操作を学ぼう

<<:  小さなHTMLコードで、ページにBaiduの検索バーを追加できます。

>>:  浮遊要素によって引き起こされる問題と解決策の詳細な説明

推薦する

JavaScriptは、ユーザーがチェックボックスをオンにする必要があるプロトコルの例を実装します。

js では、ログインまたは登録を確認する前に、ユーザーが特定の契約書を読むように設定します (使用...

Win 8 以降での最新の MySQL バージョン 5.7.17 (64 ビット ZIP グリーン バージョン) のインストールと展開のチュートリアル

まず、ブロガーはコミュニティ バージョンをプレイしていますが、学習とテストにはこれで十分です。 Bl...

Jenkins+Docker継続的インテグレーションの実装

目次1. Jenkinsの紹介2. Jenkinsをインストールしてデプロイする1. 環境情報2. ...

MySQL フェイルオーバー ノート: アプリケーション対応設計の詳細な説明

1. はじめに周知のように、データベース ミドルウェアの読み取り/書き込み分離のアプリケーション シ...

Node.js の非同期イテレータの詳細な説明

目次序文非同期イテレータとは何ですか?非同期イテレータストリームとしてページング機能を備えたAPIの...

SQL実装 LeetCode (176. 2番目に高い給与)

[LeetCode] 176. 2番目に高い給与従業員テーブルから 2 番目に高い給与を取得する ...

MySQLパーティションテーブルは月別に分類されています

目次テーブルを作成するデータベース ファイルを表示します。入れるクエリ消去補足:Mysqlは月テーブ...

MySQL 5.7.17 圧縮パッケージのインストールと設定方法のグラフィックチュートリアル

インターネット上にはMySQL 5.7.17のインストールチュートリアルがほとんどなく不十分なので、...

Node.js http モジュールの使用

目次序文ウェブHTTP サーバーファイルサーバー練習する序文Node.js 開発の目的は、JavaS...

JavaScript関数の詳細な説明これを指す問題

目次1.関数内のこの方向1. 通常の機能2. コンストラクター3. オブジェクトメソッド4. イベン...

デザインにおけるユーザーエクスペリエンスの背後にある8つのユーザー本能について話す

編集者注: この記事は、Teambition チームの @娄昊川 が寄稿したものです。Teambit...

小さなプログラムが天井に張り付いてしまう問題を完璧に解決するためにposition:stickyを使用する方法

最近、あるプロジェクトのクライアントが、上部に 2 つのタブ メニューを配置することを要求しました。...

高性能な HTML アプリケーションを作成するためのヒント

Web ページのパフォーマンスを向上させるにはどうすればよいでしょうか?ほとんどの開発者は、Java...

ソフトウェア 404 と 404 エラーとは何か、またそれらの違いは何ですか

まず、404 とソフト 404 とは何でしょうか? 404: 簡単に言えば、ユーザーが存在しないペー...