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 イントラネット スタンドアロン リバース プロキシの実装

推薦する

Apache、Tomcat、Nginx サーバーの詳細な理解と比較分析

質問1件会社のサーバーはApacheを使用しており、バックエンドはPHP、サーバーはLinux C/...

Mysqlデータベースの文字化けに対処する方法

MySQL では、データベースの文字化けは一般的に文字セットを設定することで修正できますが、文字化け...

vuexの強制リフレッシュによるデータ損失問題の分析

vuex 永続状態基本原則: すべての vuex データをローカルストレージに保存し、ページが更新さ...

Docker を使用した JMeter+Grafana+Influxdb 監視プラットフォームの構築に関する詳細なチュートリアル

Jmeter がネイティブの結果表示機能を提供していることは誰もが知っています。ネイティブの結果表示...

HTML フォームタグチュートリアル (5): テキストフィールドタグ

<br />このタグは、さらにテキストを入力できる複数行のテキスト フィールドを作成する...

ウェブデザインの初心者に役立つ学習教材をいくつかお勧めします

勉強中に読んだ本についてもよく聞かれます。以下は初心者におすすめの本です(私が勉強中に読んだ本です。...

Linuxプロセスネットワークトラフィック統計の実装プロセス

序文Linux には、ネットワーク接続、プロセス、およびその他の情報をリアルタイムで収集するための対...

docker に php-fpm サービス/拡張機能/構成をインストールする詳細なチュートリアル

macにbrewを使ってphp56をインストールしたところ、 opensslがバージョン1.1だった...

MySQLに必要な共通知識のまとめ

目次主キー制約一意の主キー非 Null 制約デフォルトの制約外部キー制約1NF 2NF 3NFデータ...

データベースの水平セグメンテーションを実装するための2つのアイデア

導入インターネット アプリケーションの普及に伴い、膨大なデータの保存とアクセスがシステム設計における...

MySQL で制限を使用するとパフォーマンスに影響するのはなぜですか?

まず、MySQL のバージョンについて説明します。 mysql> バージョンを選択します();...

Vue印刷機能を実装する2つの方法の概要

方法1: npm経由でプラグインをインストールする1. npm install vue-print-...

HTMLコードに基づく画像断片化読み込み機能の実装

今日は断片化された画像の読み込み効果を実装します。効果は次のとおりです。 これを 3 つのステップで...

JavaScript クロージャの詳細

目次1. クロージャとは何ですか? 2. 閉鎖の役割序文: JavaScript部分ではクロージャが...