This window.location cheat sheet will help you solve address path problems in a more organized way!

Translated by Samantha Ming

Like it and see. Make it a habit

In this paper,GitHub Github.com/qq449245884…Has included more categories of previous articles, as well as a lot of my documentation and tutorial material. Welcome Star and Perfect, you can refer to the examination points for review in the interview, I hope we can have something together.

If you want to get the URL information for your site, then the window.location object is perfect for you! Use its properties to get information about the current page address, or use its methods to do some page redirection or refresh 💫

Segmentfault.com/search?q= front end…

Window. The location. And origin'"https://segmentfault.com'The protocol -'https:'. The host -'segmentfault.com'The hostname -'segmentfault.com'The port -' 'The pathname -'/search'The -'? Q = Front-end smarts'The hash -'# 2'The href -Front end little wisdom 'https://segmentfault.com/search?q= # 2'
Copy the code

window.location.assign('url')
               .replace('url')
               .reload()
               .toString()
Copy the code

Window. The location attribute

Difference between host and hostname

In the example above, you may have noticed that host and hostname return the same value. So why do you want these properties. Well, it has to do with port numbers, so let’s see.

There is no URL for the port

segmentfault.com/search

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

window.location.port; // ' '
Copy the code

URL with port

segmentfault.com/search”8080

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

window.location.port; // '8080'
Copy the code

Therefore, host will include a port number, and hostname will return only the hostname.

How do I change URL properties

Not only can we call the location ‘property to retrieve URL information, we can also use it to set new properties and change the URL.

/ /'https://segmentfault.com/'

window.location.pathname = '/tidbits'; // Set pathName // result'https://segmentfault.com/tidbits'
Copy the code

Below is a complete list of properties you can change

// example window.location.protocol ='https'
               .host     = 'localhost:8080'
               .hostname = 'localhost'
               .port     = '8080'
               .pathname = 'path'
               .search   = 'query string'// do not write '? `) .hash ='hash'// (don't write 'here# `)
               .href     = 'url'
Copy the code

The only property that cannot be set is window.location.origin, which is read-only.

Location object

Window. location returns a location object. It gives us information about the current address of the page. But we can also access the Location object in several ways.

Window.location → location window.document.location → Location document.location → Location location → locationCopy the code

And the reason we do that is because these are global variables in our browser.

window.location vs location

All four of the above attributes point to the same Location object. I personally prefer window.location and will actually avoid location. Mainly because location looks like a normal variable, and we might sometimes accidentally name it a variable, which would override the global variable. Here’s an example:

// 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
}
Copy the code

I think most developers know that Window is a global variable. This is less likely to cause confusion. To be honest, I didn’t know location was a global variable until I wrote this article. It is recommended that you use window.location instead of other methods.

Window. The location method

Everyone said there was no project on your resume, so I found one and gave it away【 Construction tutorial 】.

window.location.toString

According to the MDN:

This method returns the USVString of the URL, which is the read-only version of location. href.

In other words, we can get the href value like this:

// https://www.samanthaming.com

window.location.href; // https://www.samanthaming.com
window.location.toString(); // https://www.samanthaming.com
Copy the code

assign vs replace

Both methods redirect or navigate to another URL. The difference is that assign saves the current page to history, so users can navigate to that page using the back button. With the replace method, it is not saved. Let’s look at an example.

Assign

1. Open a new blank page 2. Enter www.samanthaming.com (current page) 3. Using ` window. The location. The assign ('https://www.w3schools.com') 'Load a new page"Return to previous page"5. Return to 👉 www.samanthaming.comCopy the code

Replace

1. Open a new blank page 2. Enter www.samanthaming.com (current page) 3. Using ` window. The location. The assign ('https://www.w3schools.com') 'Load a new page"Return to previous page"5. Return to a blank pageCopy the code

How do I redirect the page

There are three ways to redirect to another page.

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

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

window.location.replace('https://www.samanthaming.com');
Copy the code

replace vs assign vs href

All three can be redirected, the difference being the browser history. The href and assign keep the current page in history, while replace does not. So if you want to create an experience where navigation doesn’t go back to the original page, use replace👍

Now the problem is href versus assign. I prefer assign because it’s a method, so it feels like I’m doing something. As an added bonus, it is easier to test. I’ve written a lot of Jest tests, so by using a method, it makes it easier to simulate.

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

myUrlUpdateFunction();

expect(window.location.assign).toBeCalledWith('http://my.url');
Copy the code

Finally, I hope that the cheat sheet can be helpful to you and can bring you answers quickly when you need them. Thank you for watching.

Original text: morioh.com/p/b444d291b…

The bugs that may exist after code deployment cannot be known in real time. In order to solve these bugs, I spent a lot of time on log debugging. Incidentally, I recommend a good BUG monitoring tool for youFundebug.

communication

This article is updated every week, you can search wechat “big move the world” for the first time to read and urge more (one or two earlier than the blog hey), this article GitHub github.com/qq449245884… It has been included and sorted out a lot of my documents. Welcome Star and perfect. You can refer to the examination points for review in the interview.