window オブジェクトは、フォームの URL を取得または設定するための location プロパティを提供し、URL を解析するために使用できます。 このプロパティはオブジェクトを返すため、このプロパティを場所オブジェクトとも呼びます。 次に、詳しく見てみましょう。 1. 場所オブジェクト1. URL Uniform Resource Locator (URL) は、インターネット上の標準リソースのアドレスです。インターネット上のすべてのファイルには一意の URL があり、その URL には、ファイルの場所とブラウザがファイルに対して行う処理に関する情報が含まれています。 URL の一般的な構文は次のとおりです。
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') }) </スクリプト> 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. 履歴オブジェクト
たとえば、2 つのページがあり、1 つのボタンを使用して前後に移動する場合は、次に示すように、2 つのページのボタンにそれぞれ forward メソッドと history メソッドをバインドできます。 <本文> <a href="list.html">リストページへ移動</a> <button>進む</button> <スクリプト> var btn = document.querySelector('ボタン'); btn.addEventListener('click',function(){ 履歴を転送する() }) </スクリプト> </本文>
<本文> <a href="index.html">メインページに戻る</a> <button>戻る</button> <スクリプト> var btn = document.querySelector('ボタン'); btn.addEventListener('click',function(){ 履歴.戻る() }) </スクリプト> </本文> 効果は次のとおりです。 あるいは、 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 小さなHTMLコードで、ページにBaiduの検索バーを追加できます。
>>: 浮遊要素によって引き起こされる問題と解決策の詳細な説明
js では、ログインまたは登録を確認する前に、ユーザーが特定の契約書を読むように設定します (使用...
まず、ブロガーはコミュニティ バージョンをプレイしていますが、学習とテストにはこれで十分です。 Bl...
目次1. Jenkinsの紹介2. Jenkinsをインストールしてデプロイする1. 環境情報2. ...
1. はじめに周知のように、データベース ミドルウェアの読み取り/書き込み分離のアプリケーション シ...
目次序文非同期イテレータとは何ですか?非同期イテレータストリームとしてページング機能を備えたAPIの...
[LeetCode] 176. 2番目に高い給与従業員テーブルから 2 番目に高い給与を取得する ...
目次テーブルを作成するデータベース ファイルを表示します。入れるクエリ消去補足:Mysqlは月テーブ...
インターネット上にはMySQL 5.7.17のインストールチュートリアルがほとんどなく不十分なので、...
目次序文ウェブHTTP サーバーファイルサーバー練習する序文Node.js 開発の目的は、JavaS...
目次1.関数内のこの方向1. 通常の機能2. コンストラクター3. オブジェクトメソッド4. イベン...
編集者注: この記事は、Teambition チームの @娄昊川 が寄稿したものです。Teambit...
最近、あるプロジェクトのクライアントが、上部に 2 つのタブ メニューを配置することを要求しました。...
Web ページのパフォーマンスを向上させるにはどうすればよいでしょうか?ほとんどの開発者は、Java...
Ubuntu 18.04、その他のバージョンのUbuntu質問: sudo apt-get ins...
まず、404 とソフト 404 とは何でしょうか? 404: 簡単に言えば、ユーザーが存在しないペー...