Common Methods for window. open () operations in JavaScript windows

Source: Internet
Author: User

In js, window. open () function is the most frequently used window operation. Next we will introduce various operations in js window. If you need to know about it, you can refer to it.

Open a window in HTML

We already know how to open a window in HTML. In most popular browsers, you can use an href statement to open a new window, for example:

Click

The Code is as follows: Copy code
<A href = "yer_new_00000000html" target = yer_new_window> here </A>

To open another window.

Note: In the above Code, the window opened by the target link is the window named "yer_new_window" above.

After reviewing the href goal, we will learn how to open a window in JavaScript.

Open a window in JavaScript

Opening a window in HTML has some drawbacks: you cannot control the size and style of the window. But JavaScript gives you such control.

The syntax for opening a window in JavaScript is:

The Code is as follows: Copy code

Window. open ("URL", "name", "features ");

Parameter description:
  
<Script language = "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>

The first parameter URL, in actual use, may be such a "http://shop34219081.taobao.com"
The second parameter name is the window name. If you open a window with the same name, the URL will send the open statement to the window that has already been opened.
The third parameter, features. this parameter is optional. It indicates different features of the window. For details, see "Windows features"

Let's look at instance 1:

The Code is as follows: Copy code

<A onclick = "too many open('win_1.html ', 'javascript _ 1');" href = "#"> Here's a window named cript_1 </A>.

Let's look at instance 2:

The Code is as follows: Copy code

<A onclick = "too many open('win_2.html ', 'javascript _ 2');" href = "#"> Here's a window named cript_1 </A>.

The two small instances will open two pages in two windows, and the two window names are cript_1 and cript_1 respectively. If another instance is like this:

The Code is as follows: Copy code

<A onclick = "too many open('win_3.html ', 'javascript _ 1');" href = "#"> Here's a window named cript_1 </A>.

Then you place a page named window_3.html In the first window.

Learning point

The Code is as follows: Copy code

Window. open ("URL", "name", "features ")

Note: Do not confuse Methods Window. open () with Methods Document. open (). The functions of these two methods are completely different. To make your code clear, use Window. open () instead of open ()

The Code is as follows: Copy code
Window. open ("URL", "name", "features ")

Method of the Window object. For details, see the html dom tutorial of w3school
JavaScript DOM

If you understand html dom, it will not be difficult to understand JavaScript DOM. For details about html dom, see the html dom tutorial of w3school

In JavaScript, the default window object is window. How can I obtain the properties of the default window?

The Code is as follows: Copy code

Var the_status = window. status;

This is to say: Find the status attribute called window and call it to the variable the_status. The status feature of the window contains the words on the status bar. You can also set it in advance, like this:

The Code is as follows: Copy code

Window. status = "I'm monkeying around! ";

Window Communication
Sometimes we open two windows at the same time and need to move the other window to the front-end. To use javascript to communicate between windows, you need to apply a reference to the window.

The Code is as follows: Copy code

Var new_window = window. open ("hello.html", "html_name", "width = 200, height = 200 ");

This statement opens a small window and assigns it to the variable new_window as a reference to this window.

You can call the new_window method as you call the window method.

New_zookeeper blur ();

Now let's take a look at the two links that move the new window to the foreground or to the background:

The Code is as follows: Copy code

<A onmouseover = new_00000000focus (); href = "#"> Bring
It forward </A>
<A onmouseover = new_00000000blur (); href = "#"> Put it
Backward </A>

Connect the above Code, the complete is like this:

The Code is as follows: Copy code

[Html] [head] [title] Getting and using a window reference [/title]

[Script language = "JavaScript"]
<! -- Hide me
// Open a new window and get a reference to it
Var new_window = window. open ("hello.html", "html_name", "width = 200, height = 200 ");
// Blur the new window
New_zookeeper blur ();
// Show me -->
</SCRIPT>
<H1> A new window has been opened and moved to the background. </H1>

<A onmouseover = new_00000000focus (); href = "#"> Bring it forward </A>
<A onmouseover = new_00000000blur (); href = "#"> Put it backward </A>
[/Body] [/html]


Framework Frames
In fact, the framework is also a feature of windows, mainly used to implement window separation.

Other methods

Note:

The Code is as follows: Copy code

// Close. The parent window dialog box is displayed, and the Child window is closed directly.
This. Response. Write ("<script language = javascript> window. close (); </script> ");

// Close. The parent window and Child Window are not displayed. Close them directly.
This. Response. Write ("<script> ");
This. Response. Write ("{top. opener = null; top. close ();}");
This. Response. Write ("</script> ");

// In the pop-up window, refresh the current page width = 200 height = 200 menu. Menu Bar, tool bar, address bar, and status bar none
This. response. write ("<script language = javascript> window. open ('rows. aspx ', 'newwindow', 'width = 200, height = 200') </script> ");

// Refresh the current page in the pop-up window
This. Response. Write ("<script language = javascript> window. open ('rows. aspx ') </script> ");
This. Response. Write ("<script> window. open ('webform2. aspx ',' _ blank '); </script> ");

// In the pop-up window, jump to the webform2.aspx page (in an IE window)
This. response. write ("<script language = javascript> alert ('registered successfully'); window. window. location. href = 'webform2. aspx '; </script> ");

// Close the current Child Window and refresh the parent window
This. Response. Write ("<script> window. opener. location. href = window. opener. location. href; window. close (); </script> ");
This. Response. Write ("<script> zookeeper opener.location.replace(w.w.opener.doc ument. referrer); window. close (); </script> ");

// Refresh the parent window in the Child Window
This. Response. Write ("<script> window. opener. location. href = window. opener. location. href; </script> ");
This. Response. Write ("<script> window. opener. location. href = 'webform1. aspx '; </script> ");

// A prompt window is displayed. After confirmation, A subwindow (WebForm2.aspx) is displayed)
This. Response. Write ("<script language = 'javascript '> alert (' published successfully! '); Window. open ('webform2. aspx') </script> ");

// A prompt window is displayed. After confirmation, refresh the parent window.
This. Response. Write ("<script> alert ('published successfully! '); Window. opener. location. href = window. opener. location. href; </script> ");

// The Same page is displayed.
<INPUT type = "button" value = "Button" onclick = "javascript: window. open (window. location. href)">

//
Response. Write ("parent. mainFrameBottom. location. href = 'yourwebform. aspx? Temp = "+ str + "';");

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.