Monday , 20 November 2017
Home / Programming / JavaScript / Window Object – Advanced JavaScript Tutorial
Window Object
Window Object

Window Object – Advanced JavaScript Tutorial

There’s one object to rule them all. That is the global object. Every variable, object and function is part of the global object. The global object can’t be accessed directly. However, most JavaScript host environments create an object that act as the global object. For browsers, this is known as the window object.

Let’s take a look at how the window object works. Like I said, all variables and functions are part of the window object. Here’s an example.

Like always, you can access a variable by it’s name. To access it via the window object, you type in window for you to use the window object. There’s no advantage to accessing a variable by using the window object. However, it gives you an idea of how all variables and functions are part of the window object.

Window Position

With the window object, you can grab the position of the window. The window object has 2 properties called screenLeft and screenTop. These 2 properties only exist in IE, Google Chrome, Opera, and Safari. Firefox has 2 different properties for the screen’s position. These properties are screenX and screenY. Let’s take a look at how to properly grab the browser’s window position in JavaScript. Add this bit of code.

We’re using something called the ternary operator. This lets us check if the screenLeft property exists. If it does, then we set the posx variable to that value. If it doesn’t, then we know the browser the visitor is using is Firefox so we access the screenX property instead. You should know that you don’t have to use the window object to access these properties. Here’s an example.

However, it’s best to use to access these properties from the window object so you don’t get things mixed up. Try moving your browser around and refreshing the page.

There also 2 functions for moving the browser. These are the moveTo() and moveBy() functions.

The moveTo() function allows you to move the browser to a specific location. It has 2 parameters. The first parameter is the x position and the second parameter is the y position. The moveBy() function moves the current position by a certain amount of pixels. The first parameter is the amount of pixels to move it in the x position. The second parameter is the amount of pixels to move it in the y position.

Here’s an example of how they would be used.

Assuming the browser’s current position is 0,0, then the browser’s position will be 50,50. Then, the moveBy() function will move it 50 pixels to the left and 50 pixels down. Thus, the browser’s new position will be 100,100.

Some browsers actually disable these 2 functions. As you can see, these 2 functions can make it super annoying for the visitor. So, it’s best not to use these 2 functions.

Window Size

There are 4 properties to get the dimensions of the window size. These are the innerWidth, innerHeight, outerWidth, and outerHeight properties. They can be accessed like so.

The difference between the inner and outer values is that the outer values are for the browser itself. The inner values are for the document.

You can resize the window by using the resizeTo() and resizeBy() functions. The resizeTo() function allows you to resize the browser to a specific dimension. The resizeBy() function allows you to resize the browser by a difference. Here’s an example. Assuming the browser’s width and height is 200 x 200 before the code executes.

These methods may be disabled depending on your browser. Once again, these methods shouldn’t be used as they aren’t guaranteed to execute.

Pop Ups

Opening up new windows is also easy with the window object. You simply use the window.open() method. This method has 4 parameters. The first parameter is the URL. The second parameter allows you to give the window a name or specify where the window should open. The third parameter allows you to set some default options for the new window. The fourth parameter allows you to set whether or not this window should replace the current document in the history.

The first 3 parameters are mainly used. We won’t use the fourth parameter as it’s rarely used. Clear your script and add this bit of code.

There are 4 ways to open up a new window. Take a look at the second parameter. This can be any of the following.

  • _blank – This is the default value. This will open up a brand new window.
  • _parent – This will load the URL in the parent frame.
  • _self – This will load the URL in the same window and tab.
  • _top – This will load in all framesets.

As you can see, we haven’t set the third parameter. Let’s update our line of code to this.

Alright, it may seem intimidating, but it’s really not. The third parameter is just one huge string with name-value pairs. Each pair is separated by commas. You don’t have to set every single setting.  Here are the settings you can use.

SettingValuesDescription
fullscreenyes or noThis setting allows you to decide wheter or not the window should be maximized when opened.
heightAny Number that isn’t a negative or below 100This setting allows you to set the height of the window if not maximized.
widthAny Number that isn’t a negative or below 100This setting allos you to set the width of the window if not maximized
leftAny Number that isn’t a negativeThis setting allows you to set the x position of the window.
topAny Number that isn’t a negativeThis setting allows you to set the y position of the window.
locationyes or noThis setting allows you to set whether or not the location bar should be displayed. This is the part of the browser that allows you to input a URL.
menubaryes or noThis setting allows you to set whether or not the menubar should be displayed
resizableyes or noThis setting allows you to set whether or not the visitor can resize the window at will.
scrollbarsyes or noYou can choose to have scrollbars if the content displayed can’t fit in the window.
statusyes or noAllows you to set if the status bar should be displayed.
toolbaryes or noAllows you to set if the toolbar should be displayed.

All of these values have default values. However, this all depends on the browser. You don’t have to set every setting above.

Manipulating New Windows

Before we wrap up this tutorial, let’s learn how to close windows opened by JavaScript. When the window has been successfully opened, then the window object will return a reference. We can then store this reference if we need to in a variable like so.

You can now use methods like resizeTo() and resizeBy() to change the dimensions by using the reference variable like so.

To close a window you can use the close() method like so.

To check if the window was closed successfully, then you can check the closed property of the window like so.

Lastly, while the window is opened, you can perform tasks specifically in that window using JavaScript like so.

Conclusion

The window object is part of the BOM (browser object model). It allows you to manipulate the objects inside the window and itself. In the next tutorial, we’ll talk about timing events. More information about the window object can be found here.

https://developer.mozilla.org/en-US/docs/Web/API/Window

About Jasko Koyn

Check Also

Try-Catch Statement

Try-catch Statement – Advanced JavaScript Tutorial

The try-catch statement is a unique way to handle errors. When errors occur, usually it …

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link