JavaScript BOM ロケーション オブジェクト + ナビゲーター オブジェクト + 履歴オブジェクト

JavaScript BOM ロケーション オブジェクト + ナビゲーター オブジェクト + 履歴オブジェクト

序文:

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

1. 場所オブジェクト

1. URL

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

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

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

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. ロケーションオブジェクトのメソッド

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

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

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

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

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

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. 履歴オブジェクト

windowオブジェクトは、ブラウザの履歴を操作するためのhistoryオブジェクトを提供します。このオブジェクトには、ユーザーがアクセスした URL (ブラウザ ウィンドウ内) が含まれます。

最も一般的に使用される 3 つの方法は次のとおりです。

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

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

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

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

効果は次のとおりです。

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

JavaScriptの BOM locationオブジェクト + navigatorオブジェクト + historyオブジェクトに関するこの記事はこれで終わりです。ロケーション オブジェクト + ナビゲーター オブジェクト + 履歴オブジェクトの関連コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • JavaScript BOMの構成と一般的なイベントの詳細な説明
  • JavaScript における BOM と DOM の詳細な説明
  • JavaScript 履歴オブジェクトの説明
  • JavaScript 履歴オブジェクトの原理分析
  • JavaScript の navigator.userAgent がブラウザ情報を取得するケースの説明
  • JSロケーションを使用して検索ボックスの履歴機能を実装する

<<:  上下に空白行があるフォームを挿入する解決策

>>:  Nginx イントラネット スタンドアロン リバース プロキシの実装

推薦する

フォーム入力ボックスに関するWebデザインのヒント

この記事では、Web デザインにおけるフォーム入力ボックスに関するヒントとコードをいくつか紹介します...

node_modulesを削除して再インストールする方法

目次ステップ1: プロジェクトをインストールするディレクトリにnode_modulesをインストール...

フロントエンドは画像を遅延ロードする方法を知っている必要があります(3つの方法)

目次1. 遅延読み込みとは何ですか? 2. 遅延読み込みを実装する🌄: 2.1 最初の方法: 2.2...

Docker がデータベースのデプロイに適さない 7 つの理由のまとめ

Docker は過去 2 年間で非常に人気が高まっています。開発者はすべてのアプリケーションとソフト...

DockerでRedashの中国語版をデプロイしてインストールする方法の詳細な説明

1. インストール手順 Linux 環境でのローカル インストールと比較すると、Docker のイン...

Alibaba Cloudのセキュリティルール設定の詳細な説明

2日前、ダブル11ショッピングフェスティバルを利用して、Alibaba CloudでECS(サーバー...

Linux (CentOS7) で RPM を使用して MySQL 8.0.11 をインストールするチュートリアル

目次1. インストールの準備1. Linux関連情報の表示(Linuxコマンドライン操作) 2. M...

Linux touch コマンドの使用例

Linux touch コマンドの詳細な説明: 1. コマンド機能:ファイルまたはディレクトリの作成...

MySQL レプリケーション テーブルの詳細とサンプル コード

MySQL レプリケーション テーブルの詳細な説明テーブル構造、インデックス、デフォルト値などを含む...

Vue.js と MJML でレスポンシブなメールを作成する

MJML は、開発者が美しく、応答性に優れ、あらゆるデバイスやメール クライアントで動作する魅力的な...

HTML のテキストエリアの改行問題の概要

最近、Textrea に転送したときに、データが本当に行ごとに保存できるかどうかという問題に遭遇しま...

Linux で ss コマンドと zabbix を組み合わせてソケットを監視する方法の詳細な説明

目次序文1. ssコマンド2. Zabbix監視マシンの全体的なソケットステータス2.1. スクリプ...

HTML における DTD の使用法の概要

DTD はマークアップの文法規則のセットです。これは XML 1.0 仕様の一部であり、HTML フ...

MySQL 8.0.14 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.14のインストールと設定のプロセスを記録しています。具体的な内容は...

Nginx サーバーが Systemd カスタム サービス プロセス分析を追加

1. nginxを例に挙げるyumコマンドを使用してNginxをインストールしましたSystemd ...