The difference between opener and parent in js is explained in detail

  • 2020-03-30 01:22:27
  • OfStack

Opener is the one who opens mine. For example, if page A pops up A window of page B with window.open, then the window of page A is the opener of page B.

Parent represents the parent window. For example, if an A page invokes A B page with an iframe or frame, then the window where the A page resides is the parent of the B page. In JS, window.opener is just a reference to the parent window of the pop-up window. For example, in a.html, a new window b.html is opened by clicking the button. Then in b.html, you can reference a.html by window.opener (omitted as opener), including objects such as document of a.html, and manipulate the contents of a.html.

If the reference fails, null is returned. So before calling the opener object, determine if the object is null, or you'll get a "object is empty or not" JS error.

Example:
Aa. HTML


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Headless document </title>
</head>
<body>
<span id="name"></span>
<input type="button" " value=" Popup window " onclick="window.open('bb.html')" />
</body>
</html

Bb. HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title> Headless document </title>
 </head>
 <body>
 <input type="text"  id="inputValue"/>
 <input type="button"  value=" add " onclick="window.opener.document.getElementById('name').innerHTML=inputValue.value"/>
 </body>
 </html> 

Window. opener returns a reference to the window that created the current window, such as clicking a link on aa.htm to open bb.htm, and then we're going to enter a value on bb.htm and give it a textbox with an id of "name" on aa.htm

Written as:
Window. Opener. Document. GetElementById (" name "). The value = "input data";
Window. Opener. Document. GetElementById (" name "). The innerHTML = "input data";


Related articles: