Window. opener opens a new window in js. Next I will introduce some usage and summary of window. opener to you.
I used to think that window. opener can be accessed only when window. open is opened. I didn't expect that even the page opened by a link can be accessed. Window. opener points to the parent window, that is, the source window. You can use window. opener to obtain the location. href information of the Source Page, or operate the DOM of the Source Page, which is very powerful.
In the following example, the value of window. opener is null.
1. Cross-Origin
If www.a.com/1.htmlis connected to www. B .com/2.html, this situation will be lost.
2. location operations using javascript
For example, if the 1.html page passes through the location.href1_1_2.html1_channel to the 2.html page, the window. opener in the 2.html page is also null and cannot be obtained.
3. Use the drag and drop function of the browser
Currently, most browsers support multi-tab browsing. If you use the drag-and-drop tab, you cannot obtain window. opener in the webpage of the new tab.
In JS, window. opener only references the parent window of the pop-up window. For example:
A.html, click "click" and click "other" to open a new window B .html. Contents.
If this reference fails, null is returned. Therefore, before calling an opener object, you must first determine whether the object is null. Otherwise, a JS error "the object is empty or does not exist" will occur.
Example
--------------------------------
Opener.html
--------------------------------
| The Code is as follows: | Copy code |
| <Html> <Body> <Form name = form1> <Input type = text name = inpu> <Input type = button onclick = "javascript: Too Many open('back2opener.html? Toname = opener. form1.inpu '); "> </Form> </Body> </Html> |
|
--------------------------------
Back2opener.html
--------------------------------
| The Code is as follows: | Copy code |
<Html> <A class = under href = # onclick = "Export opener.doc ument. form1.inpu. value + = 'Sun Chao, ';}"> Add </a> |
|
JS Code:
| The Code is as follows: | Copy code |
Window. open (); |
|
When the payment is successful, you need to close the payment platform payment success interface, and load the client payment success page on the client, JS Code:
Window. opener. location. href = url; window. close ();
Differences between window. opener and js window. parent
For differences between window. parent and window. opener, we need to use the iframe value to pass to another framework:
| The Code is as follows: | Copy code |
| Optional values opener.doc ument. getElementById (name). value = uvalue; |
|
This form.
Window. parent can obtain the parent window or parent frame of a framework. The parent of the top-level window references itself.
You can use this feature to determine whether the window is a top-level window. For example:
| The Code is as follows: | Copy code |
Function IsTopWindow (win) |
|
Window. opener references the parent page of the page opened by window. open.
Opener is who opens my project. For example, A page uses window. when the open dialog box appears, the window where page A is located is the opener of page B. You can access page A through the opener object on page B.
Parent indicates the parent window. For example, if A page A uses iframe or frame to call page B, the window where page A is located is the parent of page B.
In JS, window. opener only references the parent window of the pop-up window. For example:
A.html, click "click" and click "other" to open a new window B .html. In B .html, you can use the extension opener(specifically, opener.pdf to reference a.html, and use the extension a.html documentobject to operate a.html content. If this reference fails, null is returned. Therefore, before calling an opener object, you must first determine whether the object is null. Otherwise, a JS error "the object is empty or does not exist" will occur.
In a textbox with the id "name" on window. opener worker, you can write it:
| The Code is as follows: | Copy code |
Optional values opener.doc ument. getElementById ("name"). value = "input data "; |
|
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
