Window.Open Parameter Detailed example _ Basic knowledge

Source: Internet
Author: User

First, window.open () Support environment:

javascript1.0+/jscript1.0+/nav2+/ie3+/opera3+

Second, Windown.open Basic grammar:

window.open (Pageurl,name,parameters)

which

Pageurl as a child window path
Name is a child window handle
Parameters for window parameters (comma-separated arguments)

Three, windown.open example:

Copy Code code as follows:

<SCRIPT>
<!--
window.open (' page.html ', ' newwindow ', ' Height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, Resizable=no,location=no,status=no ')
Write a line
-->
</SCRIPT>

After the script is run, the page.html will open in the new form NewWindow, the width is 100, the height is 400, from the screen top 0 pixels, the screen left 0 pixels, no toolbar, no menu bar, no scroll bar, not adjustable size, no address bar, no status bar. Please compare.

There are a number of other parameters that are commonly used in the example above, see Four. Four, the parameters

Where yes/no can also use 1/0;pixelvalue as a 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 the parent window is closed at the same time
directories|yes/no| Whether the NAV2 and 3 columns are visible
height|pixelvalue| window Height
Hotkeys|yes/no| a secure exit hotkey in a window without a menu bar
Pixel height of document in innerheight|pixelvalue| window
Pixel width of document in innerwidth|pixelvalue| window
Whether the location|yes/no| position bar is visible
Whether the menubar|yes/no| menu bar is visible
outerheight|pixelvalue| The pixel height of the settings window (including the trim border)
outerwidth|pixelvalue| the pixel width of the settings window (including the trim border)
resizable|yes/no| window size can be adjusted
The pixel length of the screenx|pixelvalue| window from the left edge of the screen
The pixel length of the screeny|pixelvalue| window from the top edge of the screen
Whether the scrollbars|yes/no| window can have a scroll bar
Whether the titlebar|yes/no| window topic bar is visible
Whether the Toolbar|yes/no| window toolbar is visible
Pixel width of the width|pixelvalue| window
Whether the z-look|yes/no| window floats on top of other windows when it is activated

"1, the most basic pop-up window code"

In fact, the code is very simple:

Copy Code code as follows:

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

Because it's a javascripts code, they should be placed between <scrip tlanguage= "JavaScript" > tags and </script>. <!--and--> are useful for some versions of browsers that do not display the code in the label as text in these old browsers. To develop this good habit ah.

window.open (' page.html ') is used to control the pop-up of the new window page.html, if page.html is not in the same path as the main window, before the path, absolute path (http://) and relative path (...) should be specified. /) are available. Both single and double quotes are OK, just don't mix.

This piece of code can be added anywhere in HTML,

"2, after the Set pop-up window"

Let's say a pop-up window setting. Just add something to the code above.
Let's customize the appearance of this pop-up window, size, and popup position to fit the page's specifics.

<scrip tlanguage= "JavaScript" > <!--window.open (' page.html ', ' newwindow ', ' height=100,width=400,top=0,left =0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no ')//written in one line--> </SCRIPT>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Parameter explanation:

<scrip tlanguage= "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>js Script End

"3, control pop-up window with function"

The following is a complete code

<ptml> <pead> <scrip tlanguage= "JavaScript" > <!--function Openwin () {window.open ("page.html", " NewWindow "," height=100,width=400,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no ")// Write a line}//--> </script> </pead> <bodyonload= "Openwin ()" > ... Any page content ... </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

A function Openwin () is defined here, and the function content is to open a window. There is no use before calling it.
How to call it?
Method One: <bodyonload= "Openwin ()" > Browser pop-up window when reading the page;
Method Two: <bodyonunload= "Openwin ()" > Browser out of the page pop-up window;
Method Three: Call with a connection:
<a href= "#" onclick= "Openwin ()" > Open a Window </a>
Note: The "#" used is a virtual connection.
Method Four: Use a button to invoke:
<input type= "button" onclick= "Openwin ()" value= "open Window" >

"4, pop-up 2 windows at the same time"

Change the source code a little bit:

Copy Code code as follows:

<script language= "JavaScript" >
<!--
function Openwin ()
{window.open ("page.html", "NewWindow", "Height=100,width=100,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, Resizable=no,location=no,status=no ")
Write a line
window.open ("page2.html", "NewWindow2", "height=100,width=100,top=100,left=100,toolbar=no,menubar=no,scrollbars= No,resizable=no,location=no,status=no ")
Write a line
}
-->
</script>

To avoid the 2 windows that pop up, use top and left to control the pop-up positions without overwriting each other. The last four methods mentioned above can be invoked.
Note: The name of the 2 windows (NewWindows and NewWindow2) is not the same, or simply all empty. Ok?

"5, the main window to open the file 1.htm, while pop-up small Windows page.html"

The following code is added to the main window

Copy Code code as follows:

<script language= "JavaScript" >
<!--
function Openwin ()
{window.open ("page.html", "", "width=200,height=200")
}
-->
</script>

Join <body> Area:
<a href= "1.htm" onclick= "Openwin ()" >open</a>.

"6, pop-up window of the timing off control"

Below we have some control of the pop-up window, the effect is better. If we add a small piece of code to the pop-up page (note is added to the page.html HTML, not the main page, otherwise ...), let it automatically shut down in 10 seconds is it cooler?
First, add the following code to the

Copy Code code as follows:

<scrip tlanguage= "JavaScript" >
function Closeit () {settimeout ("self.close ()", 10000)/MS}
</script>

Then, then use the <bodyonload= "Closeit ()" > This sentence instead of page.html in the central some <BODY> this sentence on it. (Don't forget to write this sentence!) The function of this sentence is to call the code that closes the window, and then close the window itself after 10 seconds. )

"7, add a Close button in the pop-up window"

Copy Code code as follows:

<FORM>
<input type= ' BUTTON ' value= ' close ' onclick= ' window.close () ' >
</FORM>

Oh, now more perfect!

"8, included pop-up window-one page two windows"

The example above contains two windows, one is the main window and the other is a pop-up window.
With the example below, you can do the above in one page.

<ptml> <pead> <scrip tlanguage= "JavaScript" > Function Openwin () {Openwindow=window.open ("", "Newwin "," height=250,width=250,toolbar=no,scrollbars= "+scroll+", Menubar=no "); Write a line OpenWindow.document.write ("<TITLE> example </TITLE>") OpenWindow.document.write ("<bodybgcolor=# Ffffff> ") OpenWindow.document.write (" <p>Hello!</p> ") OpenWindow.document.write (" newwindowopened !") OpenWindow.document.write ("</BODY>") OpenWindow.document.write ("</HTML>") OpenWindow.document.close ( )} </SCRIPT> </pead> <body> opens a window <input type= "button" onclick= "Openwin ()" value= "open Window" > </ Body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Look at the code inside OpenWindow.document.write () is not standard HTML? Just write more lines in the format. Be sure to pay attention to one more label or one less label will cause errors. Remember to end with OpenWindow.document.close ().

"9, the Ultimate application-pop-up window of the cookie control"

Recall that the above pop-up window, although cool, but there is a little trouble (immersed in joy, must not find it?) For example, you put the above script in a page that needs to go through frequently (for example, the first page), then each refresh this page, the window will pop up once, is not very annoying? Is there a solution to:-(? yes!;-) FollowMe.
We can use cookies to control it.
First, add the following code to the <HEAD> area of the homepage HTML:

Copy Code code as follows:

<script>
function Openwin () {window.open ("page.html", "", "width=200,height=200")}
Functionget_cookie (Name)
{varsearch=name+ "="
Varreturnvalue= "";
if (document.cookie.length>0) {
Offset=document.cookie.indexof (search)
if (offset!=-1) {
Offset+=search.length
End=document.cookie.indexof (";", offset);
if (end==-1)
End=document.cookie.length;
Returnvalue=unescape (document.cookie.substring (offset,end))
}
}
Return returnvalue;
}
function Loadpopup () {
if (Get_cookie (' popped ') = = ") {
Openwin ()
Document.cookie= "Popped=yes"
}
}
</script>

Then, use the <bodyonload= "Loadpopup ()" > (note not openwin but Loadpop!). Replace the main page in the original <BODY> this sentence can be. You can try to refresh the page or re-enter the page, and the window will never pop again. The real pop-only-once!.
Written here pop-up window of the production and application skills are basically completed, I am also tired, said so much, I hope to be making a friend of the Web site to help me very relieved.
Note that the capitalization in the JS script is best kept consistent.

"10, refresh the parent form when the pop-up window is closed"

Refer to the following JS method to implement close pop-up window refresh parent form
Javascript:opener.location.href=opener.location.href;opener=null;window.close ()

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.