Js window closing event. JavaScript - Window Object: Opening and closing windows. Your proposal, form, etc. will be here

I have already been asked several times how to handle closing a tab. Let's say a user wants to close your site, and you make some kind of pop-up window and ask: " Are you sure?", or redirect to another site. Of course, these methods are very annoying for users, so I recommend not using them. Fortunately, browsers also handle this very poorly, however, there are still some options for handling tab closings.

It is possible to ask the user: " Is he sure he wants to close the page?". Here's how you can implement this tab closing processing:

window.onbeforeunload = function() (
return "Something to tell the user";
}

This code will work in Firefox, IE, Chrome, but will not work in Opera (this browser does not process onbeforeunload at all). In this case, the processing function itself can only return a string, that is, no redirects will work there.

The returned string will be displayed in the confirmation window in Chrome and IE. This line doesn't show up in Firefox.

In this lesson, we will learn about the various methods of the window object, which allow you to open and close windows, determine whether a window is closed, and also get its internal name, etc.

The methods of the window object are open() , close() , print() , focus() and blur() .

In this section, we will look at the following methods of the window object:

• open() - designed to open windows (tabs);
• close() - designed to close windows. Mainly used to close windows opened using the open() method;
• print() - designed to print the contents of the window;
• focus() - designed to transfer focus to the specified window;
• blur() - is intended to remove focus from the specified window.

open() method. It is designed to open a new window (tab) in the browser and has the following syntax:

Method parameters:

• The first parameter specifies Page URL, which must be loaded into this window. If the value this parameter do not specify, then a blank page (about:blank) will be displayed in the window.
• The second parameter of the open method specifies the value of the target attribute or the name of the window. The following values ​​are supported:
• _blank - The URL is loaded into a new window (tab). This is the default value;
• _parent - The URL is loaded into the parent frame. If it is not there, then the URL is loaded into the current window (tab);
• _self - URL is loaded into the current window;
• _top - cancels all frames and loads the URL into the current browser window (tab). If it is not there, then the URL is loaded into the current window (tab);
• You can also specify the name of the window to open as a parameter. This name is internal and can be used by web developers to call functions and methods of this window.
• The third parameter is intended to specify a set of window properties, which are entered separated by commas. The following basic window properties are supported:
• left , top - coordinates (in pixels) of the upper left corner of the browser window relative to the upper left corner of the screen. The values ​​of these properties must be positive or equal to 0;
• height , width - height and width work area browser window. When specifying values, it is necessary to take into account that the width and height of the browser window cannot be less than 100 pixels;
• resizable is a Boolean window property that is designed to enable or disable the ability to resize the browser window. This property accepts the following values: yes or 1, and no or 0;
• scrollbars is a Boolean window property that is used to enable or disable the display of scroll bars for the contents of the browser window. This property accepts the following values: yes or 1, and no or 0;
• status is a logical window property that is intended to enable or disable the display of the browser status bar. This property accepts the following values: yes or 1, and no or 0.

Consider the following examples:

1. Open a blank about:blank page in a new window. This window should have a width and height of 250px:

Window.open("","","width=250,height=250");

2. Open the web page "http://site/" in the current window:

Window.open("http://site/", "_self");

3. Open a new window with certain properties (top=100, left=100, width=400, height=500, scrollbars=yes, resizabie=yes):

Window.open("http://site", "_blank", "top=100, left=100, width=400, height=500, scrollbars=yes, resizable=yes");

How to interact with a window after it is opened?

The open() method allows you not only to open a window, but also to get a link to this window. This link allows you to interact with this window by calling certain properties and methods. Those. We can use JavaScript code located in one window to control another window.

For example, to access the document object of an open window:

Open an empty new window and display some text in it:

Var myWindow = window.open("", "", "width=250, height=250"); myWindow.document.write("

Some text

");

Note: You can only interact with windows that you have opened; you cannot work with other windows.

close() method

It is designed to close the window. This method has no parameters. It is typically used to close windows created by the open() method. Otherwise, when you try to close a window (tab) opened by the user himself (not from JavaScript), the browser, for security reasons, will ask the user for confirmation to perform this action.

For example, let's create buttons for opening and closing a window named myWindow:

//create a variable in which we will store a link to the window object of the open window var myWindow; function myWindowOpen ( myWindow = window.open("http://www.yandex.ru", “myWindow", "width=250, height=250"); ) function myWindowClose ( if (myWindow) ( myWindow.close() ; myWindow = null ) ) Open window Close window

print() method

It is designed to print the contents of a window. This method has no parameters.

function myPrint() ( window.print(); ) Print a page

focus() method

It is designed to give focus to the specified window. This method has no parameters.

blur() method

It is intended to remove focus from a specified window, i.e. moves it to the background. This method has no parameters.

function myWindowOpen() ( var myWindow = window.open("", "", "width=200,height=100"); ) function myWindowFocus() ( myWindow.focus(); ) function myWindowBlur() ( myWindow.blur (); ) Open window Give focus to window Move window to background

Properties of the window object: name, opener, closed.

In this section, we'll look at the following properties of the window object:

• name - is intended to obtain or set the internal name of the window;
• opener - allows you to get in the current window a link to the window (window object) from which this window was opened;
• closed is a boolean property that returns: true if the window is closed and false if the window is open.

name property

This property is very often used to change the internal name of a window after it is already open. In addition, the name property can return the current value of the window's internal name.

The internal name of the window is not a string enclosed between the opening and closing title tags - it is the name of the window that is intended for the developer. Those. this name is invisible to the user.

This name is primarily used in hyperlinks and forms to indicate the window in which the page should be opened. For example, to specify the internal name of a window in a hyperlink, the target attribute is used. If element a has the target="searchWindow" attribute, then when you click on this link The browser first tries to find a window with such an internal name (searchWindow); if a window with such an internal name does not exist, then it opens a new window and assigns it the name searchWindow. And if a window with the same name exists, then a new window does not open, but the page is reloaded the specified link and this window. By default, browser windows do not have an internal name.

For example, let's open the page "http://www.google.com/" in a window called myWindow:

window.name = "myWindow";

For example, let's open a window using the open() method and display its name in it:

var wnd = window.open("","myTest","width=200, height=300");

wnd.document.write("

This window has the name: " + wnd.name + ".");

opener property

This property allows you to get a link to the source window (window object) in the window, i.e. to the window from which the window was opened.

For example, you have an original window (1), in which you use the open() method to open another window (2). In this window (2) you can use the opener property to get window (1).