DEV Community

window.location Cheatsheet

Samantha Ming on April 22, 2020

Looking for a site's URL information, then the window.location object is for you! Use its properties to get information on the current page addre...

Read full post

Mirkan • Apr 25 '20

Great article but I found an error

Here's the complete list of properties that you can change:

// Example

window.location.protocol = 'https'
               .host     = 'localhost'
               .hostname = 'localhost:8080'
               .port     = '8080'
               .pathname = 'path'
               .search   = 'query string' // (you don't need to pass ?)
               .hash     = 'hash' // (you don't need to pass #)
               .href     = 'url'

.hostname and .host should be swaped

take care, Renas

Samantha Ming • Apr 28 '20

AH yikes 😱 Let me fix that now!! Great catch! Thanks for letting me know 😰

Mirkan • May 19 '20

Can you follow me back if posible?

Corentin Bettiol • Apr 22 '20

Good to know. I think I'm starting to understand how dev.to work and why it is so fast (hover on link => make request and store result in cache, click on link = assign url and load cached content).

I may implement those tricks to enhance user experience on my websites :)

Samantha Ming • Apr 22 '20

woooo, would love to see the inner working of how dev.to works 🤩

Pacharapol Withayasakpunt • Apr 23 '20

It's Preact. You can find source code on GitHub.

Andy Zhao (he/him) • Apr 28 '20

We use InstantClick for that "hover on link => make a request" effect :) instantclick.io/

Loading cached content is mostly because of Fastly!

Most of the pages are Rails pages, and there's some Preact mixed in every once in a while.

Corentin Bettiol • Apr 28 '20

Don't really know how caching is managed or anything about the Rail framework, but instanclick seems to be a gold nugget!

Thanks for the link, and bravo for this insanely fast website :)

Michal Čaplygin • May 11 '20 • Edited

Heads up: root URLs always end with slash. More specifically, the path part that follows host and port is mandatory and according URL format specification cannot be blank nor omitted and must start with slash, so the shortest value usually denoting root path is just '/'. Most agents tend to fix invalid input and silently add missing parts of URL before making request, and some user agents tend to hide single slash of root paths for (dubiously) aesthetic reasons, but actual HTTP request such agent produces always involves / path. "URLs" like http://host, http://host?search, http://host#hash are all in fact invalid and should be expressed as http://host/, http://host/?search, http://host/#hash.

window.location.href;
// never yields 'https://www.samanthaming.com'
// but rather 'https://www.samanthaming.com/'

url.spec.whatwg.org/#concept-url-path
url.spec.whatwg.org/#path-absolute...

Ben Halpern • Apr 22 '20

This is fabulous

Samantha Ming • Apr 22 '20

Thanks Ben! 😄

Stephanie Eckles • Apr 27 '20

When I was trying to decide an efficient way to determine if files were being served on localhost or prod, I came here and ended up with if(window.location.port) to test for localhost 🙌I'm sure I will visit more in the future, great job creating an excellent, clear resource!

Samantha Ming • Apr 29 '20

Nice! Glad you found the article helping and you were able to apply the knowledge right away! I also list all my tidbits on my site if you want another resource to check out 😊 > samanthaming.com/

Pacharapol Withayasakpunt • Apr 23 '20 • Edited

I often use new URL(location.href).searchParams, BTW. Much more powerful than location.search.

Samantha Ming • Apr 23 '20

OH COOL! must be a new-ish web API, no support for IE ... hmm...did they create this to hopefully replace window.location 🤔

I'll need to look into it, maybe for a future tidbit 😊

Maas Mirzaa • Apr 28 '20

Wonderful, thanks for the breakdown :)

Samantha Ming • Apr 28 '20

You're very welcome! Thanks for reading 😄

victorekpo-decodedigital • Apr 28 '20

Awesome!

Samantha Ming • Apr 28 '20

Thank you! 🙂

Alex Chiu • Apr 23 '20

brilliant break down! really filled in the gaps for me. 🙌

Samantha Ming • Apr 23 '20

awesome, glad to hear that! Thanks for reading my article 😊

Mustapha Aouas • Apr 25 '20

This is a great Post!
I learned something thanks 💯

Samantha Ming • Apr 28 '20

Thanks Mustapha! So glad this post was helpful for you 👏

Eric Ahnell • Apr 24 '20

You're so good at explaining this stuff to other developers, Samantha! I learned a bunch of things from reading.

Samantha Ming • Apr 28 '20

Thank you Eric! Being able to explain and communicate where other people can understand is a skill I'm trying to get better at. So I'm glad to hear I'm doing okay 😆 -- there's still more room for improvement! I'll keep practicing -- hopefully one day i can explain it where non-dev will also understand it and they will be encouraged to learn programming 😊