JavaScript open windows Summary of several methods

Source: Internet
Author: User
Tags generator

JS Open window is generally the use of window.open method:

Win = window.open (Child_window_url, Child_window_name, child_window_attrs);

The parent window can then obtain a reference to the child window through win, and can then detect if win is defined and win.closed to detect whether the window is open.

The code is as follows Copy Code

<script language= "JavaScript" >
<!--
window.open (' page.html ')
-->
</SCRIPT>

The code is placed between the <script language= "JavaScript" > tags and </script>.


But if you refresh the parent window and the parent window loses these references, how do we detect if the child window exists again?
I think there are probably the following methods:

Method using a cookie

When you open a child window, a child window or a parent window can write a cookie to indicate whether the child window is open, and then delete the cookie when the child window closes, so that the cookie persists even if the parent window is refreshed. This allows the parent window to detect the presence of a child window by detecting the presence of the cookie, and child windows and parent windows can cross subdomains.

Method two local storage

Method is the same as the method, but child windows and parent Windows cannot be cross-domain, because local storage cannot cross domains, nor can subdomains.

Method Three window.open

Accidentally found this dongdong, very good method, I tried under the compatibility is very good, address: test address;
The general principle is this:

window.open ("", Child_window_name, Child_window_attrs);

By opening an identical window name with an empty address, the window is closed by determining whether the address of the window is "About:blank" (provided that the previous open 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") {
Window does not exist
Win = window.open (Child_window_url, Child_window_name, child_window_attrs);
} else {
window so that it already exists
Win.focus ();
}

This is a good method, but open the child window, the child window can not be relocated, otherwise IE will be denied access to the error, the specific way to see examples.


<script language= "javascript" > JS script started;
window.open the command to eject a new window;
The filename of the ' page.html ' pop-up window;
' NewWindow ' pop-up window name (not filename), not required, available null ' instead;
height=100 window height;
width=400 window width;
The pixel value of the Top=0 window from the top of the screen;
The pixel value of the left=0 window from the left side of the screen;
Toolbar=no whether the toolbar is displayed, yes for display;
Menubar,scrollbars represents the menu bar and scroll bar.
Resizable=no whether to allow changes to the window size, yes to allow;
Location=no whether the address bar is displayed, yes is allowed;
Status=no whether the information in the status bar is displayed (usually the file is open), yes to allow;
</SCRIPT>

JavaScript Popup Adaptive Picture 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);
NewWindow.document.open ();
NewWindow.document.write (' NewWindow.document.write (' ');
NewWindow.document.write (' </body> NewWindow.document.close ();
Newwindow.focus ();
}
//-->
</script>
<a href= "#" ></a>

Various parameters
Where yes/no can also use 1/0;pixel value as the specific value, the unit pixel.

Parameters | Value Range | Description

alwayslowered | yes/no | Specifies that the window is hidden behind all windows
alwaysraised | yes/no | Specifies 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 NAV2 and 3 columns are visible
Height | Pixel value | Window height
hotkeys | yes/no | Set up a secure exit hotkey in a window without a 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 position bar is visible
MenuBar | yes/no | Whether the menu bar is visible
Outerheight | Pixel value | Set the pixel height of a window (including a decorative border)
Outerwidth | Pixel value | Set the pixel width of a window (including a decorative border)
resizable | yes/no | Whether the window size can be adjusted
ScreenX | Pixel value | The pixel length of the window from the left edge of the screen
ScreenY | Pixel value | The pixel length of the window from the edge of the screen
ScrollBars | yes/no | Whether a window can have a scroll bar
TitleBar | yes/no | Whether the window topic bar is visible
Toolbar | yes/no | Whether the window toolbar is visible
Width | Pixel value | The pixel width of the window
Z-look | yes/no | Whether the window floats on top of other windows when it is activated

Open a new window close an old window

"Close" the old window while opening a new window by redirecting the URL

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>
The page to jump is opened by overriding the URL test2.html
</BODY>
</HTML>
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.