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

推薦する

MySQLデータベース移行におけるデータ文字化けの問題を解決する

リーダーの指示のもと、Java プロジェクトを引き継ぎ、リファクタリングを行う必要がありました。同時...

CSSをインポートする方法に関する詳細な洞察の要約

CSS の開発履歴についてはここでは紹介しません。ブログを書いている理由の 1 つは、フロントエンド...

HTMLページ埋め込み動画とJSコントロール切り替え動画例の詳しい説明

まず、ページにビデオを埋め込むための HTML コードは次のとおりです。コードをコピーコードは次のと...

HTMLはa要素hrefのURLリンクを自動的に更新したり新しいウィンドウを開いたりする機能を実装する

場合によっては、次のような機能を実装したいことがあります。リンクをクリックします。リンクがブラウザで...

Linux touch コマンドの使用例

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

MySQL テーブルの断片化を解消し、スペースを再利用する方法

目次MySQL テーブルの断片化の原因行の断片化行内断片化空き領域の断片化MySQL で極度に断片化...

Dockerのセキュリティについて Docker-TLS暗号化通信の問題

目次1. Dockerのセキュリティ問題2. Dockerアーキテクチャの欠陥とセキュリティメカニズ...

CSSの記述形式、モバイルページの基本構造の詳細な説明

1. CSSの記述形式1. インラインスタイルCSSコードを開始タグに直接記述することができます&l...

HTML 終了タグの問題と W3C 標準

W3C の原則によれば、XML の各開始タグには対応する終了タグが必要です。つまり、<html...

DockerでSpring Bootアプリケーションを実行する方法

ここ数日、dockerでSpring Bootアプリケーションを実行する方法を勉強してきました。以前...

ウェブデザインと制作に関する科学的原則と提案の要約

<br />ネットワーク設計の分野では、アイトラッキングに関する研究が非常に盛んに行われ...

CSS を使用してテクスチャ付きグラデーション背景画像を記述するためのサンプル コード

プロジェクト内のページの長さはおよそ2000px以上あり、背景画像にはテクスチャやグラデーションがあ...

キープアライブキャッシュをクリアする方法の詳細なグラフィック説明

目次オープニングシーンv-for を使用した直接レンダリングカスタムコンポーネントで直接レンダリング...

Reactイベントメカニズムソースコード分析

目次原理ソースコード分析委任されたイベントバインディングすべてのサポートされているイベントを聴くネイ...

より人気がありクリエイティブなダーク背景のウェブデザインの例

暗い背景スタイルのページ デザインは非常に人気があり、シックでエレガント、そして非常にクリエイティブ...