Example of window. open Parameters

Source: Internet
Author: User

I. Windows. open () support environment:

JavaScript1.0 +/JScript1.0 +/Nav2 +/IE3 +/Opera3 +

Ii. Primary wn. open basic syntax:

Window. open (pageURL, name, parameters)

Where:

PageURL is the sub-window path
Name is the sub-window handle
Parameters is window parameters (parameters are separated by commas)

Iii. Example of mongown. open:

Copy codeThe Code is as follows:
<SCRIPT>
<! --
Optional values 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 row
-->
</SCRIPT>

After running the script, page.html will be opened in the newwindow of the new form, with a width of 100 and a height of 400. It is 0 pixels away from the screen top, 0 pixels left, no tool bar, no menu bar, no scroll bar, and cannot be adjusted, no address bar, no status bar. Please compare.

In the preceding example, several common parameters are involved. In addition, there are many other parameters. For details, see section 4. Iv. Parameters

Where yes/no can also use 1/0; pixelvalue 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 | pixelvalue | window height
Hotkeys | yes/no | set the Security Exit hotkey in the window without menu bar
InnerHeight | pixelvalue | pixel height of the document in the window
InnerWidth | pixelvalue | 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 | pixelvalue | set the pixel height of the window (including the decorative border)
OuterWidth | pixelvalue | set the pixel width of the window (including the decorative border)
Resizable | yes/no | whether the window size can be adjusted
ScreenX | pixelvalue | pixel length between the window and the left boundary of the screen
ScreenY | pixelvalue | 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 | pixelvalue | pixel Width of the window
Z-look | yes/no | whether the window floated above other windows after being activated

[1. The most basic pop-up window Code]

In fact, the code is very simple:

Copy codeThe Code is as follows:
<Scrip tlanguage = "javascript">
<! --
Using multiple open('page.html ')
-->
</SCRIPT>

Because it is a piece of javascripts code, they should be placed between the <scrip tlanguage = "javascript"> tag and </script>. <! -- And --> are used for some earlier browsers, and the code in the labels is not displayed as text in these old browsers. This is a good habit.

When using open('page.html', it is used to control the new window page.html. If page.html is not in the same path as the main window, the path, absolute path (http: //), and relative path (../) should be specified earlier. You can use single quotes and double quotes, but do not mix them.

This piece of code can be added to any location of HTML, either between

[2. After setting, the pop-up window is displayed]

Let's talk about the settings in the pop-up window. You just need to add something to the code above.
We will customize the appearance, size, and position of the pop-up window to adapt to the specific situation of the page.

<Scrip tlanguage = "javascript"> </SCRIPT>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

Parameter description:

<Scrip tlanguage = "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> end of js SCRIPT

[3. Function Control pop-up window]

The following is a complete code

<Html> <pead> <scrip tlanguage = "JavaScript"> </script> </pead> <bodyonload = "openwin ()">... Any page content... </Body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

A function openwin () is defined here, and the function content is to open a window. There is no purpose before calling it.
How to call it?
Method 1: <bodyonload = "openwin ()"> A window pops up when the browser reads the page;
Method 2: <bodyonunload = "openwin ()"> A window pops up when the browser leaves the page;
Method 3: call with a connection:
<A href = "#" onclick = "openwin ()"> open a window. </a>
Note: "#" is a virtual connection.
Method 4: call with a button:
<Input type = "button" onclick = "openwin ()" value = "open window">

4. Two windows are displayed at the same time]

Slightly modify the source code:

Copy codeThe Code is 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 row
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 row
}
// -->
</Script>

To avoid overwriting the two pop-up windows, use top and left to control the position of the pop-up window. Finally, use the four methods mentioned above to call.
Note: The names of the two windows (newwindows and newwindow2) must not be the same, or they are all empty. OK?

Open the file 1.htmin the main window, and pop up the window page.html at the same time]

Add the following code to the

Copy codeThe Code is as follows:
<Script language = "javascript">
<! --
Function openwin ()
{Window. open ("page.html", "", "width = 200, height = 200 ")
}
// -->
</Script>

Add to the <body> area:
<A href = "1.htm" onclick =" openwin () "> open </a>.

[6. timed close control for the pop-up window]

Next we will make some control over the pop-up window, and the effect will be better. If we add the field code to the page that pops up (the page is added to the HTML of page.html, not the homepage, otherwise ...), Is it cool to enable automatic shutdown in 10 seconds?
First, add the following code to the

Copy codeThe Code is as follows:
<Scrip tlanguage = "JavaScript">
Function closeit () {setTimeout ("self. close ()", 10000) // millisecond}
</Script>

Then, use <bodyonload = "closeit ()"> to replace the original <BODY> sentence in page.html. (Do not forget to write this sentence! The function of this statement is to call the code for closing the window. The window will be closed in 10 seconds .)

7. Add a close button in the pop-up window]

Copy codeThe Code is as follows:
<FORM>
<Input type = 'button 'value = 'close 'onclick = 'window. close ()'>
</FORM>

Now it's more perfect!

[8. included pop-up window-one page and two windows]

The preceding example contains two windows: one is the main window and the other is the small window that appears.
Through the example below, you can complete the above effect on a page.

<Html> <pead> <scrip tlanguage = "JavaScript"> function openwin () {OpenWindow = window. open ("", "newwin", "height = 250, width = 250, toolbar = no, scrollbars =" + scroll + ", menubar = no "); // write it into a line of openmediaworkflow Doc ument. write ("<TITLE> example </TITLE>" wrote opentracing example Doc ument. write ("<BODYBGCOLOR = # ffffff>" using opentracing using Doc ument. write ("Hello! "Your openmediaworkflow Doc ument. write (" Newwindowopened! "Using opentracing using Doc ument. write ("</BODY>" Your openmediaworkflow Doc ument. write ("</HTML>" Your openworkflow workflow Doc ument. close ()} </SCRIPT> </pead> <body> opens a window <input type = "button" onclick = "openwin () "value =" open window "> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

Do you think the code in openmediaworkflow Doc ument. write () is not standard HTML? You only need to write more rows according to the format. An error occurs when you add one or more labels. Remember to end with opentracing upload Doc ument. close.

[9. Ultimate application-Cookie control in the pop-up window]

In retrospect, although the pop-up window above is cool, there is a little bit of a problem (immersed in joy, do not find it ?) For example, if you place the above script in a page that requires frequent access (such as the homepage), the window will pop up every time you refresh the page, isn't it very annoying? :-(Is there a solution? Yes !; -) Followme.
We can use cookies to control it.
First, add the following code to the <HEAD> area of the HTML homepage:

Copy codeThe Code is 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 <bodyonload = "loadpopup ()"> (not openwin, but loadpop !) Replace the original <BODY> sentence on the home page. You can refresh the page or enter the page again, and the window will no longer pop up. Real Pop-Only-Once!
The creation and application skills of the pop-up window are basically completed, and I am exhausted. I have said so much in one breath, I hope that my friends who are making web pages will be very pleased.
It should be noted that the case sensitivity of JavaScript scripts should be consistent.

[10. Refresh the parent form when closing the pop-up window]

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

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.