a minute ago

JavaScriptのLocationでURL取得、操作、画面リロードなどを行う


概要

Locationは、JavaScriptで今開いている画面のURLが欲しい、パスだけ欲しい、画面をリロードしたいなど、URLに関わる操作がしたいときに使います。

使い方

google chromeを使っている方はF12を押して開発者ツールを開き、Consoleにlocationと打つと大体わかります。

> location
ancestorOrigins: DOMStringList {length: 0}
assign: ƒ assign()
fragmentDirective: FragmentDirective {}
hash: ""
host: "localhost:3000"
hostname: "localhost"
href: "http://localhost:3000/articles/web-api-location"
origin: "http://localhost:3000"
pathname: "/articles/web-api-location"
port: "3000"
protocol: "http:"
reload: ƒ reload()
replace: ƒ replace()
search: ""
toString: ƒ toString()
valueOf: ƒ valueOf()
Symbol(Symbol.toPrimitive): undefined
__proto__: Location

よく使うのは以下

よく使うプロパティ

プロパティ概要
location.hrefURL全体を返すhttp://localhost:3000/articles/web-api-location
location.hostポートを含めたホストlocalhost:3000
location.hostnameポートを含めないホストlocalhost
location.pathnameURLのパス部分/articles/web-api-location

よく使うメソッド

メソッド概要
location.reload()表示中のページをリロードlocation.reload()
location.assign()指定のURLに移動location.assign(<移動先のURL>)

Related Articles