アドレス パスの問題をより深く理解し、解決するのに役立つ 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

上記の 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 サイトの他の関連記事を参照してください。