Object-Oriented JavaScript — Built-in Browser Objects

JavaScript is partly an object-oriented language.

To learn JavaScript, we got to learn the object-oriented parts of JavaScript.

In this article, we’ll look at built-in browser objects.

The window.location Property

The window.location property lets us get the URL of the page and redirect it to another one.

For instance, we can use location.hostname to get the hostname.

And href gets us the full path.

pathname gets us the segment before the query string.

port gives us the port.

search gives us a query string.

We can get all the properties of the location object with the loop:

for (const key in location) {
  if (typeof location[key] === "string") {
    console.log(key, location[key]);
  }
}

We loop through each property with the location object.

We set the location.href property to redirect to a new URL.

For example, we can write:

window.location.href = 'http://www.example.com';

Also, we can write:

location.href = 'http://www.example.com';
location = 'http://www.example.com';
location.assign('http://www.example.com');

replace is almost the same as assign , but it doesn’t create a new browser history entry.

We can use it by writing:

location.replace('http://www.example.com');

To reload a page, we can write:

location.reload();

We can also assign window.location.hre to itself to reload the page:

window.location.href = window.location.href;
location = location;

The window.history Property

The window.history property lets us access the previously visited pages of the same browser session.

For instance, we can see the number of pages visited before visiting the current page with window.history.length .

We can’t see the actual URLs to maintain privacy.

But we can navigate back and forth through the user’s session.

We can use:

history.forward();
history.back();

to move forward and back in the history respectively.

history.back() is also the same as history.go(-1); .

To go 2 pages back, we can write:

history.go(-2);

And we can reload the current page with:

history.go(0);

The HTML5 history API also lets us change the URL without reloading the page.

We can use the history.pushState method to change the page.

For instance, we can write:

history.pushState({foo: 1}, "", "hello");

The first argument is the value of the stte property.

The 2nd is the title, which isn’t used.

And the 3rd is the URL path to go to.

Then we can get the state with history.state .

The window.frames Property

The window.frames property is a collection of all frames in the current page.

It doesn’t distinguish between frames and iframes.

window.frames points to window no matter frames are present on the page or not.

So:

window.frames === window;

returns true .

If we have a frame like:

<iframe name="helloFrame" src="hello.html" />

Then frames.length is 1.

We can get the first frame, which is window , with:

window.frames[0];
window.frames[0].window;
window.frames[0].window.frames;
frames[0].window;
frames[0];

We can reload the frame with:

frames[0].window.location.reload();

And the frame’s parent is window , so:

frames[0].parent === window;

returns true .

We have the top property to get the topmost page, which is the page all the other frames from within the frame.

So all of these:

window.frames[0].window.top === window;
window.frames[0].window.top === window.top;
window.frames[0].window.top === top;

return true .

self is the same as window , so:

self === window

returns true .

Also, these also return true :

frames[0].self === frames[0].window;
window.frames['helloFrame'] === window.frames[0];
frames.helloFrame === window.frames[0];

Conclusion

The window.location property and window.frames lets us get and set the URL of our app and get the frames respectively.