Home > Developer > JavaScript
Windows are the most important interface elements in Web browsers. JavaScript provides many window operating tools, the JavaScript processing window is similar to the Processing Framework (because the framework is located in the document window in the total browser window ).
Today I learned how to use JavaScript to open, update, and locate windows, and how to use JavaScript to write information into windows so that you can build webpages at runtime.
(1) open a new window
[Html]
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Open a Window </title>
<Script type = "text/javascript" src = "script01.js"> </script>
</Head>
<Body bgcolor = "# FFFFFF">
<H1> The Master of the House <H2> Click on his name to behold he who must be adored <H2> <a href = "#" class = "newWin"> Tired </a> </Body>
</Html>
(2) open multiple windows
[Html]
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> About that Cat </title>
<Script type = "text/javascript" src = "script02.js"> </script>
</Head>
<Body bgcolor = "# FFFFFF">
<H1> More pictures of our cat <H2> <a href = "#" class = "newWin"> Click here to see him </a> </Body>
</Html>
(3) Close the window
[Html]
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Window Test </title>
<Script type = "text/javascript" src = "script03.js"> </script>
</Head>
<Body bgcolor = "# FFFFFF">
<Div align = "center">
<H1> Let's play with windows! </H1>
<H3>
<A href = "#" id = "openWin"> Open a new window </a>
<A href = "#" id = "closeWin"> Close the window </a>
</H3>
</Div>
</Body>
</Html>
(4) Place the window in the specified position
[Html]
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Window Test </title>
<Script type = "text/javascript" src = "script06.js"> </script>
</Head>
<Body bgcolor = "# FFFFFF">
<Div align = "center">
<H1> Let's play with windows! </H1>
<H3>
<A href = "#" id = "topLeftWin"> Move/open window in the top left </a>
<A href = "#" id = "topRightWin"> Move/open window in the top right </a> <br/>
<A href = "#" id = "bottomLeftWin"> Move/open window in the bottom left </a>
<A href = "#" id = "bottomRightWin"> Move/open window in the bottom right </a> <br/>
<A href = "#" id = "closeWin"> Close the window </a>
</H3>
</Div>
</Body>
</Html>
The js scripts required for the above four operations are as follows:
[Javascript]
/**
* Open a new window (script1.js)
*/
Window. onload = newWinLinks;
Function newWinLinks (){
For (var I = 0; I <document. links. length; I ++ ){
If (document. links [I]. className = "newWin "){
Document. links [I]. onclick = newWindow;
}
}
}
Function newWindow (){
Var catWindow = window. open ("images/pixel1.jpg", "catWin", "resizable = no, width = 350, height = 260 ");
// Note that there cannot be any space between the comma in the width and height parameters. If there is a space, the script
// It may be invalid in Some browsers,
Return false;
}
[Javascript]
<Pre class = "javascript" name = "code"> /**
* Multiple windows are opened (script2.js). Each time you click a control on the screen, different windows are opened through the created script.
*/
Window. onload = newWinLinks;
Function newWinLinks (){
For (var I = 0; I <document. links. length; I ++ ){
If (document. links [I]. className = "newWin "){
Document. links [I]. onclick = newWindows;
}
}
}
Function newWindows (){
For (var I = 1; I <5; I ++ ){
Var imgName = "images/pixel" + I + ". jpg ";
Var winName = "window" + I;
Var catWindow = window. open (imgName, winName, "width = 350, height = 260 ");
}
}
[Javascript]
/**
* Close the window (script3.js)
*/
Var newWindow = null;
Window. onload = newWinLinks;
Function newWinLinks (){
For (var I = 0; I <document. links. length; I ++ ){
Document. links [I]. onclick = chgWindowState;
}
}
Function windowOpen (){
If (newWindow &&! NewWindow. closed ){
Return true;
}
Return false;
}
Function chgWindowState (){
If (this. id = "closeWin "){
If (windowOpen ()){
NewWindow. close ();
} Else {
Alert ("The window isn' t open ");
}
}
If (this. id = "openWin "){
If (windowOpen ()){
Alert ("The window is already open! ");
} Else {
NewWindow = window. open ("", "newWin", "toolbar, location = yes, width = 300, height = 200 ");
}
}
Return false;
}
[Javascript]
/**
* Place the window at the specified position (script4.js). Sometimes you want to open a window at the specified position on the screen. In this example, you can open a small window at one of the four corners of the screen.
*/
Var newWindow = null;
Window. onload = newWinLinks;
Function newWinLinks (){
For (var I = 0; I <comment Eng. links. length; I ++ ){
Document. links [I]. onclick = chgWindowState;
}
}
Function windowOpen (){
If (newWindow &&! NewWindow. closed ){
Return true;
}
Return false;
}
Function chgWindowState (){
If (this. id = "closeWin "){
If (windowOpen ()){
NewWindow. close ();
} Else {
Alert ("The window isn' t open ");
}
Return false;
}
Var topPos = 0;
Var leftPos = 0;
If (this. id. indexOf ("bottom")>-1 ){
TopPos = screen. availHeight-200;
}
If (this. id. indexOf ("Right")>-1 ){
LeftPos = screen. availWidth-300;
}
If (windowOpen ()){
NewWindow. moveTo (leftPos, topPos );
} Else {
NewWindow = window. open ("", "newWin", "toolbar, location = yes, width = 300, height = 200, left =" + leftPos + ", top =" + topPos );
}
Return false;
}
Comparison Between opener and parent:
Window. opener actually refers to the parent window of the current window, for example, parWin. js uses window. open pops up childWin. jsp, then in childWin. window in js. opener refers to parWin. jsp, so in childWin. windows can be used in js. opener calls any parWin. the methods in jsp implement parWin. jsp and childWin. jsp interaction.
Window. parent is the parent page object called by the iframe page. For example, if a parWin page uses iframe or frame to call the childWin page, the window of the parWin page is the parent of the childWin page.
(Source JavaScript basic tutorial)
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
