コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 本文

アドレス パスの問題をより深く理解し、解決するのに役立つ window.location のチートシートです。 ！

青灯夜游
リリース： 2021-05-24 11:14:22
転載
1733 人が閲覧しました

この記事では、アドレス パスの問題をより深く理解し、解決するのに役立つ window.location のチートシートを共有します。 ！一定の参考値があるので、困っている友達が参考になれば幸いです。

アドレス パスの問題をより深く理解し、解決するのに役立つ window.location のチートシートです。 ！

サイトの URL 情報を取得したい場合は、window.location オブジェクトが適しています。そのプロパティを使用して現在のページ アドレスに関する情報を取得するか、そのメソッドを使用してページのリダイレクトやリフレッシュを実行します。

https://segmentfault.com/search?q=frontend小智#2
window.location.origin    → '"https://segmentfault.com'
               .protocol  → 'https:'
               .host      → 'segmentfault.com'
               .hostname  → 'segmentfault.com'
               .port      → ''
               .pathname  → '/search'
               .search    → '?q=前端小智'
               .hash      → '#2'
               .href      → 'https://segmentfault.com/search?q=前端小智#2'
ログイン後にコピー
window.location.assign('url')
               .replace('url')
               .reload()
               .toString()
ログイン後にコピー

window.location プロパティ

window.location戻り値.originサイトのメイン アドレス (プロトコル ホスト名ポート).protocolプロトコル アーキテクチャ (.hostドメイン名ポート . portPort.pathname最初のページの「/」が続くパス .search? に続くクエリ文字列 .hash##.href#ホストとホスト名の違い
http: または htts:)
# から始まる部分
完全な URL

# 上記の例では、host と

hostname

が同じ値を返していることがわかります。では、なぜこれらの特性があるのでしょうか。さて、ポート番号の話なので見てみましょう。 #ポートなしの URL

https://segmentfault.com/search

window.location.host; // 'segmentfault.com'
window.location.hostname; // 'segmentfault.com'

window.location.port; // ''
ログイン後にコピー
ポートありの URL

https://segmentfault.com/search

window.location.host; // 'segmentfault.com:8080'
window.location.hostname; // 'segmentfault.com'

window.location.port; // '8080'
ログイン後にコピー
したがって、host

にはポート番号が含まれますが、
hostname
はホスト名のみを返します。

URL 属性を変更する方法

location` 属性を呼び出して URL 情報を取得できるだけでなく、それを使用して新しい属性を設定したり、 URL。 

// 开始 'https://segmentfault.com/'

window.location.pathname = '/tidbits'; // 设置 pathname

// 结果 'https://segmentfault.com/tidbits'
ログイン後にコピー
変更できるプロパティの完全なリストは次のとおりです。
// 事例
window.location.protocol = 'https'
               .host     = 'localhost:8080'
               .hostname = 'localhost'
               .port     = '8080'
               .pathname = 'path'
               .search   = 'query string' // (这里不用写 `?`)
               .hash     = 'hash' // (这里不用写 `#`)
               .href     = 'url'
ログイン後にコピー

設定できない唯一のプロパティは、読み取り専用の

window.location.origin

です。

Location オブジェクト

window.locationLocation

オブジェクトを返します。ページの現在のアドレスに関する情報が得られます。ただし、いくつかの方法で

Location オブジェクトにアクセスすることもできます。 

window.location          → Location
window.document.location → Location
document.location        → Location
location                 → Location
ログイン後にコピー
これを行う理由は、これらがブラウザーのグローバル変数であるためです。

window.location と location

アドレス パスの問題をより深く理解し、解決するのに役立つ window.location のチートシートです。 ！

上記の 4 つのプロパティはすべて、同じ

Location オブジェクトを指します。私は個人的に window.location

を好み、実際には

location の使用を避けます。主な理由は、location は通常の変数のように見えるため、場合によっては誤って変数名を付けてしまい、グローバル変数をオーバーライドしてしまう可能性があるためです。例: 

// https://www.samanthaming.com

location.protocol; // 'https'

function localFile() {
  const location = '/sam';

  return location.protocol;
  // ❌ undefined
  //    b/c local "location" has override the global variable
}
ログイン後にコピー
ほとんどの開発者は、window がグローバル変数であることを知っていると思います。こうすることで混乱が起こりにくくなります。正直に言うと、この記事を書くまで、location

がグローバル変数であるとは知りませんでした。他の記述方法ではなく、

window.location を使用することをお勧めします。 #window.location メソッド

メソッド

関数新しいドキュメントの読み込み
.assign()
.replace()現在のドキュメントを新しいドキュメントで置き換えます1 つのドキュメント
.reload()現在のページを再読み込み
.reload()戻り先 URL

window.location.toString

根据 MDN :

此方法返回 URL 的 USVString，它是 Location.href 的只读版本。

换句话说，我们可以这样得到 href 的值：

// https://www.samanthaming.com

window.location.href; // https://www.samanthaming.com
window.location.toString(); // https://www.samanthaming.com
ログイン後にコピー

assign vs replace

这两种方法都是重定向或导航到另一个URL。 区别在于assign 是将当前页面保存在历史记录中，因此用户可以使用“后退”按钮导航到该页面。 而使用replace方法时，不会保存它。 让我们来看一个例子。

Assign

1. 打开一个新的空白页
2. 输入 www.samanthaming.com (当前页)

3. 使用 `window.location.assign('https://www.w3schools.com')` 载入新页面
4. 按 "返回上一页"
5. 返回到了  www.samanthaming.com
ログイン後にコピー

Replace

1. 打开一个新的空白页
2. 输入 www.samanthaming.com (当前页)

3. 使用 `window.location.assign('https://www.w3schools.com')` 载入新页面
4. 按 "返回上一页"
5. 返回到一个空白页
ログイン後にコピー

如何让页面重定向

如何重定向到另一个页面，有3种方法。

window.location.href = 'https://www.samanthaming.com';

window.location.assign('https://www.samanthaming.com');

window.location.replace('https://www.samanthaming.com');
ログイン後にコピー

replace vs assign vs href

这三个都可以重定向，区别在于浏览器的历史记录。 href和assign 会把当前页面保存在历史记录中，而replace则不会。 因此，如果你想创建一种导航无法回到原始页面的体验，请使用replace

现在的问题是href与assign。 我更喜欢assign，因为它是一种方法，因此感觉好像我正在执行一些操作。 还有一个额外的好处是它更易于测试。 我已经编写了许多Jest测试，因此通过使用一种方法，它使其更易于模拟。

window.location.assign = jest.fn();

myUrlUpdateFunction();

expect(window.location.assign).toBeCalledWith('http://my.url');
ログイン後にコピー

最终希望备忘单，希望能对你有所帮助，在需要的时候，能快速给你带来答案。

英文原文地址：https://morioh.com/p/b444d291bdfb

作者：Samantha Ming

转载自：https://segmentfault.com/a/1190000040017009

译者：前端小智

更多编程相关知识，请访问：编程教学！！

以上がアドレス パスの問題をより深く理解し、解決するのに役立つ window.location のチートシートです。 ！の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
javascript
ソース：segmentfault.com
前の記事：Nodejs プログラムのデバッグの詳細については、こちらをご覧ください。 次の記事：Node.js をブラウザーでローカルに実行する方法についての簡単な説明
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート