Home > Developer > JavaScript
<A href = "http://www.intel.com/" target = "Review"> intel </a>
The previous link opens a new window named review. The following links use JavaScript to produce the same effect:
<A href = "http://www.intel.com /"
Onclick = "window. Open ('HTTP: // www.intel.com/', 'review'); Return false"> intel </a>
As you can see, it is very easy to assign a name to a new window. However, what if I name an existing window or a window generated by a user?
The name attribute of the window object allows you to set the name of any window through JavaScript. If you want to create a new window, it can be associated with the link and form of the parent window, you must assign a name to the opens:
Window. Name = "Main ";
VaR map = Window. Open ("newpage.html", "map ");
If newpage.html contains the following link, the following page will be loaded in the parent window:
<A href = "http://www.docjs.com/" target = "Main"> Doc JavaScript </a>
Attributes of the attacker
Set the opener attribute or retrieve the reference of the window in which the current window is created. When the open () method is called to open a source document in the target window, the opener attribute (the window object of the target window) defines the window where the source document is located. This attribute always exists in the opened window, so it can still be accessed even if the URL in the new window changes.
The opener attribute is a reference to the window object of the parent window, so you can make full use of this attribute and execute any operations to open the window in the new window through the script program. For example, in the target document, use the following script to modify the background color of the window:
Zookeeper opener.doc ument. bgcolor = "beige ";
Well, if you have a keen eye, you may have noticed the above statement error. We must check whether the window still exists before deciding to modify its properties. The following is the correct code:
If (window. Opener &&! Window. opener. Closed)
Zookeeper opener.doc ument. bgcolor = "beige ";
The opener attribute is very useful because it establishes a two-way connection between the opened window and the Opened Window.
Let's give a practical example to see if it works. below is the HTML code of the form displayed on the home page:
<Form name = "stockform"> enter your favorite tech stock:
<Input type = "text" name = "stockbox" size = "10" value = "">
<Input type = "button" value = "list" onclick = "showlist ()">
</Form>
Note: The form name is stockform, the text field name is stockbox, and the "list" button activates the showlist () function. At the same time
<Body> set the onUnload Event Handler in the flag. It will execute the remlink () function. The code for the two functions is as follows:
<Script language = "JavaScript">
<! --
Function showlist (){
Slist = Window. Open ("stocklist.html", "list", "width = 150, Height = 210 ");
}
Function remlink (){
If (window. slist & window. slist. Open &&! Window. slist. Closed)
Window. slist. Opener = NULL;
}
// -->
</SCRIPT>
When the current document is uninstalled, The remlink () function sets the opener attribute of the subwindow to null. The script program in the new window checks the opener Attribute before assigning text field values. We must use this function, because if a different document is loaded in a new window, the script program in this window will not be able to access the text box.
The following is the stocklist.html code:
<HTML>
<Head>
<Title> stock list </title>
<Script language = "JavaScript">
<! --
Function pick (Symbol ){
If (window. Opener &&! Window. opener. Closed)
Using Role opener.doc ument. stockform. stockbox. value = symbol;
Window. Close ();
}
// -->
</SCRIPT>
</Head>
<Body>
<Table border = "1" cellspacing = "0" cellpadding = "5">
<Tr bgcolor = "# cccccc"> <TD> <B> NYSE </B> </TD> <B> NASDAQ </B> </TD> </tr>
<Tr> <TD> <a href = "javascript: Pick ('aol ')"> AOL </a> </TD>
<TD> <a href = "javascript: Pick ('csco ')"> csco </a> </TD> </tr>
<Tr> <TD> <a href = "javascript: Pick ('cpq')"> cpq </a> </TD>
<TD> <a href = "javascript: Pick ('intc ')"> intc </a> </TD> </tr>
<Tr> <TD> <a href = "javascript: Pick ('nok')"> NOK </a> </TD>
<TD> <a href = "javascript: Pick ('sunw')"> sunw </a> </TD> </tr>
<Tr> <TD> <a href = "javascript: Pick ('lu')"> Lu </a> </TD>
<TD> <a href = "javascript: Pick ('amzn ')"> AMZN </a> </TD> </tr>
<Tr> <TD> <a href = "javascript: Pick ('T')"> T </a> </TD>
<TD> <a href = "javascript: Pick ('msft ')"> MSFT </a> </TD> </tr>
</Table>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
