Summary of several methods for opening a window in JavaScript

This article will give you a detailed summary of several methods to open a JavaScript window. window. open () is the most commonly used method to open a new window in js. Next I will introduce its usage.

In js, the window. open method is generally used:

Win = window. open (CHILD_WINDOW_URL, CHILD_WINDOW_NAME, CHILD_WINDOW_ATTRS );

Then, the parent window can get the reference of the Child Window through win, and then you can check whether win is defined and win. closed to check whether the window is opened.

The Code is as follows:	Copy code
<Script language = "javascript"> <! -- Window. open ('page.html ') --> </SCRIPT>

The code is placed between the <script language = "javascript"> tag and </script>.

However, if you refresh the parent window, the parent window will lose these references. How can we check whether the Child Window exists again?
I would like to use the following methods:

Method 1 use cookies

When opening a child window, the Child Window or parent window can write a cookie to indicate whether the child window is opened, and then delete the cookie when the child window is closed. Even if the parent window is refreshed, the cookie still exists, so that the parent window can detect the existence of the cookie to check whether the Child Window exists, and the Child Window and parent window can cross-subdomain.

Method 2 Local Storage

Methods are basically the same as methods, but child and parent Windows cannot cross-origin, because local storage cannot cross-origin or subdomain.

Method 3 window. open

I have no intention of discovering this stuff. It is a good method. I tried to solve this problem with good compatibility. Address: Test address;
The general principle is as follows:

Window. open ("", CHILD_WINDOW_NAME, CHILD_WINDOW_ATTRS );

By opening a window with the same name and empty address, you can determine whether the address of the window is "about: blank". If yes, the window is closed (provided that the previous opened address is not empty ).

The Code is as follows:	Copy code
Win = window. open ("", CHILD_WINDOW_NAME, CHILD_WINDOW_ATTRS ); If (win. location. href = "about: blank "){ // The Window does not exist. Win = window. open (CHILD_WINDOW_URL, CHILD_WINDOW_NAME, CHILD_WINDOW_ATTRS ); } Else { // The window already exists Win. focus (); }

This is a good method, but when opening the sub-window, the sub-window cannot be relocated, otherwise the access will be denied in ie. Take a look at the specific method for an example.

<Script language = "javascript"> the js SCRIPT starts;
Window. open command to pop up a new window;
'Page.html 'name of the pop-up window;
'Newwindow' indicates the name of the pop-up window (not the file name). It is optional and can be replaced by null;
Height = 100 window height;
Width = 400 window width;
Top = the pixel value between the 0 window and the top of the screen;
Left = 0 the pixel value between the window and the left of the screen;
Toolbar = no indicates whether to display the toolbar. yes indicates display;
Menubar and scrollbars indicate the menu bar and scroll bar.
Resizable = no: whether to change the window size. yes: yes;
Location = no indicates whether the address bar is displayed. yes indicates yes;
Status = no whether to display the information in the status bar (usually the file has been opened), yes is allowed;
</SCRIPT>

JavaScript pop-up adaptive image window

The Code is as follows:

Copy code

<Script language = "JavaScript" type = "text/JavaScript"> Function openPictureWindow_Fever (imageName, alt, posLeft, posTop ){ Var image = new Image (); Image. src = imageName; ImageWidth = image. width; ImageHeight = image. height; NewWindow = window. open ("", "newWindow", "width =" + imageWidth + ", height =" + imageHeight + ", left =" + posLeft + ", top = "+ posTop ); Newmediaworkflow Doc ument. open (); Newmediaworkflow Doc ument. write ('Newmediaworkflow Doc ument. write (' '); Newmediaworkflow Doc ument. write ('</body> Newmediaworkflow Doc ument. close (); NewWindow. focus (); } // --> </Script> <A href = "#"> </a>

Parameters
Here, yes/no can also use 1/0; pixel value is a specific value, in pixels.

Parameter | value range | description

AlwaysLowered | yes/no | specifies that the window is hidden behind all windows
AlwaysRaised | yes/no | specify that the window is suspended above all windows
Depended | yes/no | whether to close the parent window at the same time
Directories | yes/no | whether the directory bar of Nav2 and 3 is visible
Height | pixel value | window height
Hotkeys | yes/no | set the Security Exit hotkey in the window without menu bar
InnerHeight | pixel value | pixel height of the document in the window
InnerWidth | pixel value | pixel width of the document in the window
Location | yes/no | whether the location bar is visible
Menubar | yes/no | whether the menu bar is visible
OuterHeight | pixel value | set the pixel height of the window (including the decorative border)
OuterWidth | pixel value | set the pixel width of the window (including the decorative border)
Resizable | yes/no | whether the window size can be adjusted
ScreenX | pixel value | pixel length between the window and the left boundary of the screen
ScreenY | pixel value | pixel length between the window and the upper boundary of the screen
Scrollbars | yes/no | whether the window has a scroll bar
Titlebar | yes/no | whether the title bar of the window is visible
Toolbar | yes/no | whether the toolbar of the window is visible
Width | pixel value | pixel Width of the window
Z-look | yes/no | whether the window floated above other windows after being activated

Open new window close old window

By redirecting URLs, you can "close" the old window while opening a new window.

The Code is as follows:

Copy code

Test1.html <! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> <HTML> <HEAD> <TITLE> test1 </TITLE> <Meta name = "Generator" CONTENT = "EditPlus"> <Meta name = "Author" CONTENT = ""> <Meta name = "Keywords" CONTENT = ""> <Meta name = "Description" CONTENT = ""> </HEAD> <Script type = "text/javascript"> Function toNewWindow (){ Window. top. location. href = "test2.html "; } </Script> <BODY> <Input type = "button" value = "open another page test2.html" onclick = "toNewWindow ()"> </BODY> </HTML> Test2.html <! Doctype html public "-// W3C // dtd html 4.0 Transitional // EN"> <HTML> <HEAD> <TITLE> test2.html </TITLE> <Meta name = "Generator" CONTENT = "EditPlus"> <Meta name = "Author" CONTENT = ""> <Meta name = "Keywords" CONTENT = ""> <Meta name = "Description" CONTENT = ""> </HEAD> <BODY> After the URL is rewritten, test2.html </BODY> </HTML>