jQuery window

Updated March 29, 2023

Definition of jQuery window

jQuery window object represents an open window in the browser. The window object is automatically created by the browser. Suppose our documents contain multiple frames, then the browser creates one window object for the HTML document and creates additional window objects for each frame. The window object is not the object of jQuery or JavaScript, it is the object of the browser. Almost all browsers support a window object, but there is no public standard that applies to the window object.

Properties of jQuery window

Properties of the window Object are:

• closed – This property represents whether a window is closed or not, it returns a Boolean value.
• console – This property returns the Console object for logging to the browser’s console.
• defaultStatus – This property uses to sets or gets the default text of a window status bar.
• document – This property uses to gets the Document object for the window.
• frameElement – This property uses to get the <iframe> element in the current window.
• frames – This property uses to get all the <iframe> element in the current window.
• history – This property uses to get the History object for the window.
• innerHeight – This property uses to get the height of the content area of the window with scrollbars.
• innerWidth – This property uses to get the width of the content area of the window with scrollbars.
• length – This property uses to get the number of <iframe> elements in the current window
• localStorage – This property allows to store key/value pairs in a web browser without an expiration date.
• location – This property uses to get the window’s Location object.
• name – This property uses to set or get the window’s name.
• navigator – This property uses to get the window’s navigator object.
• opener – This property uses to get a reference to the window which created the window.
• outerHeight – This property uses to get the height of the browser window with including scrollbars or toolbars.
• outerWidth – This property uses to get the width of the browser window with including scrollbars or toolbars.
• pageXOffset – This property uses to get the scrolled of the current document in the upper left corner of the window (horizontally) in the pixels.
• pageYOffset – This property uses to get the scrolled of the current document from the upper left corner of the window (vertically) in the pixels.
• parent – This property uses to get the current window’s parent.
• screen – This property uses to get the window’s Screen object.
• screenLeft – This property uses to get the window’s horizontal coordinates relative to the screen.
• screenTop – This property uses to get the window’s vertical coordinate relative to the screen.
• screenX – This property uses to get the window’s horizontal coordinates relative to the screen.
• screenY – This property uses to get the window’s vertical coordinate relative to the screen.
• sessionStorage – This property allows to store key/value pairs data for one session in a web browser.
• scrollX – This is an alias for pageXOffset.
• scrollY – This is an alias for pageYOffset.
• self – This property uses to get the current window.
• status – This property uses to get or set the status bar text for a window.
• top – This property uses to get the topmost browser window.

Methods of jQuery window

• alert – This method is used to displays an alert box which contains some message and an OK button.
• confirm – This method is used to displays a dialog box which contains some message, an OK and a Cancel button.
• atob – This method is used to decodes a string of data that has been encoded using Base64 encoding.
• btoa – This method is used to encodes a string of data using base-64.
• blur – This method is used to remove the focus from the current window.
• focus – This method is used to set focus on the current window.
• clearInterval – This method is used to cancel a timer which has been set by setInterval().
• clearTimeout – This method is used to cancel a timer which has been set by setTimeout().
• open – This method is used to open the new browser window.
• close – This method is used to close the current window.
• getComputedStyle – This method is used to get the current CSS styles of an element applied.
• getSelection – This method is used to get the Selection object which specifies the text selected by the user like a range.
• matchMedia – This method is used to get the MediaQueryList object which specifies the couple of methods and properties which most frequently used being the matches property.
• moveBy – This method is used to move the window relative to the current position
• moveTo – This method is used to move the window to the specific position
• print – This method is used to print the current window’s content.
• prompt – This method is used to give prompts for user input.
• requestAnimationFrame – This method is used to request the browser for animation update to call a function before the next repaint.
• resizeTo – This method is used to resize a window to the given width and height.
• resizeBy – This method is used to resize a window to the given pixels.
• scrollTo – This method is used to scroll the document to the given coordinates. This is the replacement method for the Deprecated scroll() method.
• scrollBy – This method is used to scroll the document to the given number of pixels.
• setTimeout – This method is used to evaluates an expression or calls a function after a given number in milliseconds.
• setInterval – This method is used to evaluates an expression or calls a function or at a given interval in milliseconds.
• stop – This method is used to stop the loading of the window.

Examples

Example of jQuery window object to use properties and methods. Next, we write the HTML code to understand the jQuery window object more clearly with the following example, where we use properties and methods of the window object, as below –

Code:

<!doctype html>
<html lang = "en">
<head>
<meta charset="utf-8">
<title> This is an example for jQuery window object </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<script>
var nwindow;
function fun_open() {
nwindow = window.open("", "newWindow", "width=500, height=500");
nwindow.document.write("<h3>This is a new window.</h3>");
}
function property_apply() {
if (!nwindow) {
document.getElementById("text").innerHTML = "Not opened 'newWindow'.";
} else {
if (nwindow.closed) {
document.getElementById("text").innerHTML = "Closed 'newWindow'.";
} else {
document.getElementById("text").innerHTML = " Not closed 'newWindow'..";
}
}
}
function get_parent_window()
{
nwindow.opener.document.write("<p>This is the window which create the new window.</p>");
}
function fun_close() {
if (nwindow) {
nwindow.close();
}
}
</script>
</head>
<body>
<p> Example for the jQuery window properties and methods</p>
<ul>
<li>
<button onclick="fun_open()">Call function to create window</button></li>
<br><br>
<li><button onclick="property_apply()"> Call function to check wethere window open or close</button></li>
<br><br>
<div id="text"></div>
<br><br>
<li><button onclick="fun_close">Call function to close window</button></li>
<br><br>
<li> <button onclick="get_parent_window()">Call function to get parent window</button></li>
<br><br>
</body>
</html>

Output:

Once we click on the “Call function to create window” Button, the output is:

And once we click on the “Call function to close window” button, the new created window get closed.

Next when we click on the “Call function to check whether window open or close” button, the output is –

Next when we click on the “Call function to get parent window” button, which opens a new window and display as –

The above program it demonstrating the use of some of the window properties and methods. As above in the code, it is used the document and opener properties and the open(), close() functions.

Conclusion

A jQuery window object is a browser object, which is automatically created by the browser.

This is a guide to jQuery window. Here we discuss the Description, properties, methods, examples with code implementation. You may also have a look at the following articles to learn more –

1. jQuery promise
2. jQuery zindex
3. jQuery when
4. jQuery off