Home > Developer > JavaScript
Window.opener returns a reference to the window that created the current window
the use of Window.opener
Window.opener returns a reference to the window that created the current window, such as clicking on a link on a.htm and opening the b.htm, and then we're going to enter a value on the b.htm and give it a TextBox with an ID of "name" on the a.htm, It can be written as:
Window.opener.document.getElementById ("name"). Value = "Data entered";
There is no good understanding of the Window.opener in JavaScript.
Why can't a pop-up window's parent window have a page in the frame that can't be used? How do you manipulate the parent window in the frame through a popup window?
opener.parent.frames[' FrameName '].document.all.input1.value try this:)
But when it comes to window.opener, it is impossible to say open, which can be used together.
window.open () Support environment: javascript1.0+/jscript1.0+/nav2+/ie3+/opera3+
Basic syntax:
window.open (Pageurl,name,parameters)
which
Pageurl as child window path
Name is a child window handle
Parameters is the window parameter (each parameter is separated by commas)
Example:
<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 runs, Page.html will open in the new form NewWindow, with a width of 100, a height of 400, 0 pixels from the top of the screen, 0 pixels left on the screen, no toolbars, no menu bars, no scroll bars, no resizing, no address bar, no status bar.
In the example above, there are a few parameters that are commonly used, but there are many other parameters as follows:
Various parameters
Where yes/no can also use 1/0;pixel value for a specific value, unit pixels.
Parameters | Range of Values | Description
alwayslowered | yes/no | Specifies that the window is hidden after all windows
alwaysraised | yes/no | Specifies that the window hovers above all windows
depended | yes/no | Whether to close at the same time as the parent window
Directories | yes/no | NAV2 and 3 's catalog columns are visible
Height | Pixel value | Window height
hotkeys | yes/no | Set safe exit Hotkey in window without menu bar
Innerheight | Pixel value | The pixel height of the document in the window
Innerwidth | Pixel value | The 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 | Pixel value | Set the pixel height of the window (including the decorative border)
Outerwidth | Pixel value | Set the pixel width of the window (including the decorative border)
resizable | yes/no | Whether the window size can be adjusted
ScreenX | Pixel value | The pixel length of the window from the left edge of the screen
ScreenY | Pixel value | The pixel length of the window from the top edge of the screen
ScrollBars | yes/no | Whether the window can have a scroll bar
TitleBar | yes/no | Whether the window title bar is visible
Toolbar | yes/no | Whether window toolbars are visible
Width | Pixel value | The pixel width of the window
Z-look | yes/no | Whether the window is activated to float on top of other windows
Using functions to control pop-up windows
The following is a complete code.
<script language= "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>
<body onload= "Openwin ()" >
Any page content ...
</body>
A function Openwin () is defined here, and the function content is to open a window. How to invoke it?
Method One:
<body onload= "Openwin ()" >
Pop-up window when the browser reads the page;
Method Two:
<body onunload= "Openwin ()" >
Popup window when the browser leaves the page;
Method Three:
With a connection call:
<a href= "#" onclick= "Openwin ()" > Open a Window </a>
Note: The "#" used is a virtual connection.
Method Four:
Call with a button:
<input type= "button" onclick= "Openwin ()" value= "open Window" >
How to use window.open to return a value to a parent window without using window.showModalDialog.
For example: page aaa.htm use window.open mode to pop up the page bbb.htm.
Select a value on page bbb.htm to confirm that the selected value is returned to the parent window aaa.htm when the window is closed.
Aaa.htm gets the value returned, assigns a value to the text box on this page.
Add the following code to the Bbb.htm page:
Window.opener.document.getElementById ("Thetextareaid"). Value = Document.getelemnetbyid ("Theselectid"). Value;
The use of Window.opener
Window.opener returns a reference to the parent window that created the current window, such as clicking on a link on a.htm and opening the b.htm, and then we're going to enter a value on the b.htm and give it a TextBox with an ID of "name" on the a.htm, It can be written as:
Window.opener.document.getElementById ("name"). Value = "Data entered";
There is no good understanding of the Window.opener in JavaScript.
Why can't a pop-up window's parent window have a page in the frame that can't be used? How do you manipulate the parent window in the frame through a popup window?
opener.parent.frames[' FrameName '].document.all.input1.value
That is, opener this object is the previous window, you can use window.opener.document ... Invoke the relevant method of document, such as the following example, inserting some table rows into the previous window:
function Taletotb (ITEMSTR) {
NewRow = Opener.document.all.itemTb.insertRow (opener.document.all.itemTb.rows.length);
rowcnt = Opener.document.all.itemTb.rows.length;
Newcell = Newrow.insertcell ();
newcell.insertadjacenthtml (' BeforeEnd ', ' <div align= ' center ' > ' +itemcode+ ' </div> ');
Newcell = Newrow.insertcell ();
newcell.insertadjacenthtml (' BeforeEnd ', ' <div align= ' center ' > ' +itemname+ ' </div> ');
Newcell = Newrow.insertcell ();
newcell.insertadjacenthtml (' BeforeEnd ', ' <div align= ' center ' ><input type= "hidden" name= "Itembox" value= ' +itemcode+ ' ></div> ');
11:56 Views (159) Comments (0) Category: JavaScript 2008-02-27
Thumbnail display confirm usage and examples
Typically used for pop-up dialog boxes (OK/No)
OK: executes its nested content; no: the reverse
<script language= "JavaScript" >
Verify the time format YYYY-MM-DD/YYYY,MM,DD
function IsDate (date) {
var Regu = "^[0-9]{4}-([0-1]?) [0-9] {1}-([0-3]?) [0-9] {1}$ ";
var re = new RegExp (Regu);
if (Date.search (re)! =-1)
return true;
Else
return false;
}
function Surebutton () {
If (do you really want to delete the!confirm? You will not be able to recover after deletion! ‘)){
Return
}
Verify the time format YYYY-MM-DD
var Startdate=document.getelementbyid ("StartDate"). Value;
var Enddate=document.getelementbyid ("EndDate"). Value;
if (!isdate (StartDate)) {
Alert (startdate+ "Please enter the correct start date format!): (YYYY-MM-DD) 2008-01-01");
return document.getElementById ("StartDate"). focus ();
}
if (!isdate (endDate)) {
Alert ("Please enter the correct end date format!: (YYYY-MM-DD) 2008-01-01");
return document.getElementById ("EndDate"). focus ();
}
if (startdate== "") {
Alert ("Please enter a start date");
return document.getElementById ("StartDate"). focus ();
}
if (enddate== "") {
Alert ("Please enter an end date");
return document.getElementById ("EndDate"). focus ();
}
Startdate=startdate.replace (New RegExp ('-', ' g '), '/');
alert (startdate);
Enddate=enddate.replace (New RegExp ('-', ' g '), '/');
var starttime=new Date (startdate). GetTime ();
Alert (new Date (StartDate). GetTime ());
var endtime=new Date (endDate). GetTime ();
if ((endtime-starttime) <0) {
Alert ("The end date must be greater than the start date");
return document.getElementById ("EndDate"). focus ();
}
}
</script>
<meta http-equiv= "Content-language" content= "ZH-CN" >
<meta name= "generator" content= "Bluefish 1.0.7" >
<meta name= "ProgId" content= "FrontPage.Editor.Document" >
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">
<title></title>
<style type= "Text/css" >
Table{color: #000000; font-family: song body; font-size:12px; Height:12}
T1{color: #008000; Align:center}
</style>
<body topmargin= "0" leftmargin= "0" >
<div align= "Left" >
<table border= "0" cellpadding= "0" cellspacing= "0" style= "border-collapse:collapse" bordercolor= "#111111" width= " 461 "height=" 8 "id=" AutoNumber1 "background=" Images/kabg.gif ">
<tr>
<TD colspan= "3" >
<table cellpadding= "0" cellspacing= "0" style= "border-collapse:collapse" bordercolor= "#111111" width= "100%" height = ">"
<tr>
<TD width= "19%" height= "" align= "center" style= "border:1px solid #000080;" ><font color= "#008000" > Start date </font></td>
<TD width= "31%" style= "border:1px solid #000080;" >
<input name= "StartDate" type= "text" id= "StartDate" size= "></td>"
<TD width= "22%" align= "center" style= "border:1px solid #000080;" ><font color= "#008000" > End Date </font></td>
<TD width= "28%" style= "border:1px solid #000080;" >
<input name= "EndDate" type= "text" id= "endDate" size= "></td>"
</tr>
</table>
</td>
</tr>
<tr>
<TD height= "align=" center "style=" border:1px solid #000080; "colspan=" 3 ">
<table border= "0" cellpadding= "0" cellspacing= "0" style= "border-collapse:collapse" bordercolor= "#111111" width= " 100% "id=" AutoNumber3 "height=" >
<tr>
<TD width= "14%" align= "center" height= ">"
<font color= "#008000" > Current status </font></td>
<TD width= "18%" align= "center" height= ">"
<select size= "1" name= "display" >
<option value= "0" > Invalid </option>
<option value= "1" > Wait </option>
<option value= "2" selected> display </option>
</select></td>
<TD width= "15%" align= "center" height= "style=" border-left:1px solid #000080; Border-right-width:1; Border-top-width:1; Border-bottom-width:1 ">
<font color= "#008000" >logo line width </font></td>
<TD width= "10%" align= "center" height= ">"
<select size= "1" name= "Colvalue" >
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select></td>
<TD width= "12%" align= "center" style= "border-left:1px solid #000080; Border-right-width:1; Border-top-width:1; Border-bottom-width:1 "><font color=" #008000 "> Display order </font></td>
<TD width= "5%" >
<input name= "Displayorder" type= "text" id= "Displayorder" size= "3" value= "1" >
</td>
<TD width= "43%" align= "center" height= "style=" border-left-style:solid; Border-left-width:1; Border-right-width:1; Border-top-width:1; Border-bottom-width:1 ">
<input onclick= "CancelButton ()" type= "reset" value= "Off" name= "B2" style= "border-style:outset; Border-width:1; Color: #0000FF ">
<input onclick= "Surebutton ()" type= "Submit" value= "Determine" name= "B1" style= "border-style:outset; Border-width:1; Color: #0000FF "></td>
</tr>
</table>
</td>
</tr>
<tr>
<TD height= "colspan=" 3 "align=" center "style=" border:1px solid #000080; ">
<marquee behavior= "Slide" style= "color: #808080";:: Date format is year-month-day, directly fill in the picture and click the path full name should be carefully checked whether the correct::</marquee>< /TD>
</tr>
</table>
</div>
</body>
You can delete the table record rows in bulk, select the deleted rows from the checkbox, and you can increase the record rows in bulk, specifying the number of rows by the input box.
<meta http-equiv= "Content-type" content= "text/html; Charset=shift-js ">
<title>the page of append rows to table</title>
<script language= "JavaScript" >
New row
function AddRow () {
var textnum = document.getElementById ("rownum");
Number of rows to get new Row Records
var index = Textnum.value;
if (!checknum (index)) {
Alert ("You can have input number in the text!");
Textnum.focus ();
Textnum.select ();
}
for (var i = 0; i < index; i++) {
Get Table Object
var tableobj = document.getElementById ("Maintb");
Get Tbody Object
var tablebodyobj = document.getElementById ("mainbody");
var newrowobj = document.createelement ("tr");
var newcheckbox = document.createelement ("TD");
var newtext1 = document.createelement ("TD");
var newtext2 = document.createelement ("TD");
var newtext3 = document.createelement ("TD");
newcheckbox.innerhtml = ' <center><input type= ' checkbox ' name= ' checkbox ' onclick = ' Checkboxsel () ' ></ Center> ';
newtext1.innerhtml = ' <input type= ' text "name=" Newcarname "size=" 9 ">";
newtext2.innerhtml = ' <input type= ' text "name=" Newcarname "size=" 9 ">";
newtext3.innerhtml = ' <input type= ' text "name=" Newcarname "size=" 9 ">";
Added TD node under the new TR node
Newrowobj.appendchild (Newcheckbox);
Newrowobj.appendchild (NEWTEXT1);
Newrowobj.appendchild (NEWTEXT2);
Newrowobj.appendchild (NEWTEXT3);
adding TR nodes under the TBODY node
Tablebodyobj.appendchild (Newrowobj);
}
}
New Row count selection box check that the input must be a number
function Checknum (strval) {
if (strval.length! = 0) {
var r = Strval.match (new RegExp (/^[0-9]+$/));
if (r = = null) {
return false;
}else{
return true;
}
}
return true;
}
Bulk delete a specified row
function DeleteRow () {
var Tblen;
Get all CheckBox objects
var checkbox = document.getelementsbyname ("checkbox");
var checkboxlen = document.all.checkbox.length;
Get the number of checkboxes for all submissions
var checkboxlen = checkbox.length;
var ischecked;
Get Delete button Object
var Delbutton = document.getElementById ("delete");
for (var i=0; i < Checkboxlen; i++) {
Get the number of table rows
Tblen = This.mainTb.rows.length;
Finally keep a row of records
if (Tblen = = 1)
{
Document.getelementsbyname ("checkbox") [0].checked = false;
Alert ("A line has to being saved in the ID of maintb!");
Delete button is not available
Delbutton.disabled = true;
return false;
}
ischecked = checkbox[i].checked;
If the current checkbox is selected: Delete the current node, the cursor (record line pointer) should also be moved up, since the node is removed.
if (ischecked)
{
document.all ("Maintb"). DeleteRow (i);
document.getElementById ("Maintb"). DeleteRow (i);
Cursors (record row pointers) move up
i--;
}
Re-statistics checkbox count
Checkboxlen = Checkbox.length;
}
Button state is not available after delete operation
Delbutton.disabled = true;
}
CheckBox button Click event handler: If at least one row of records is selected, the operation can be deleted, and if there is no selection, the Delete button is not available
function Checkboxsel () {
Get Delete button Object
var Delbutton = document.getElementById ("delete");
if (Checkselect ()) {
delbutton.disabled = false;
}else{
Delbutton.disabled = true;
}
}
function Checkselect () {
Get all CheckBox objects
var checkbox = document.getelementsbyname ("checkbox");
Get the number of checkboxes for all submissions
var chklength = checkbox.length;
var flag = false;
for (var i = 0; i < chklength; i++)
{
if (checkbox[i].checked = = True)
{
Flag = true;
Break
}
}
if (flag = = True)
{
return true;
} else {
return false;
}
}
Executes when the page loads the body content
function LoadPage () {
var Delbutton = document.getElementById ("delete");
var rownum = document.getElementById ("rownum");
The initial Delete button is not available
Delbutton.disabled = true;
Initial number of rows input box content is empty
Rownum.value = "";
}
</script>
Dynamically add, delete rows, respectively through the Insertrow,deleterow method implementation, display line number, through the RowIndex property, basic can dynamically implement related functions.
<script language= "Javascript" >
var cgetrow=-99999;
var Lineno = 1;
function _ (ID) {
return document.getElementById (ID);
}
The index of the row to is deleted.
This index starts from 0 and was relative to the logical order (not document order)
Of all the rows contained inside the table.
If the index is-1 the last row of the table is deleted.
function AddRow () {
Add a row
var newtr = _ ("Tab1"). InsertRow ();
Add two columns
var newTd0 = Newtr.insertcell ();
var newTd1 = Newtr.insertcell ();
Set column contents and properties
newtd0.innerhtml = ' <input type=checkbox id= ' box ' + Lineno + ' "onclick=" GetRow () ">";
Test dynamically change the ID of a checkbox in innerHTML
Alert (_ ("box" + Lineno). ID);
newtd1.innertext= ' new Add line ' + Lineno;
lineno++;
}
function Delrow (iIndex) {
Delete a row
if (iindex==-99999) {
Alert ("System tip: No line number checked!");
}else{
IIndex = Cgetrow;
_ ("Tab1"). DeleteRow (IIndex);
}
}
function GetRow () {
Get row index
Two parentelement are TD and TR Yo, rowindex is the property of TR
This.parentElement.parentElement.rowIndex
Cgetrow=window.event.srcelement.parentelement.parentelement.rowindex;
}
function Showrow () {
Show line Numbers
alert (Cgetrow);
Alert (document.getElementsByTagName ("tr"). length);
}
</script>
<table id= "Tab1" border=1>
<tr id= "TR1" >
<TD width=6%><input type=checkbox id= "Box1" onclick= "GetRow ()" ></td>
<TD id= "A" > First line </td>
</tr>
<tr id= "TR2" >
<TD width=6%><input type=checkbox id= "Box2" onclick= "GetRow ()" ></td>
<TD id= "B" > second line </td>
</tr>
<tr id= "TR3" >
<TD width=6%><input type=checkbox id= "Box3" onclick= "GetRow ()" ></td>
<TD id= "C" > Third row </td>
</tr>
</table>
<table id= "Tab1" border=1>
<tr id= "TR1" >
<TD width=6%><input type=checkbox id= "Box1" onclick= "GetRow ()" ></td>
<TD id= "A" > Statistics </td>
</tr>
</table>
<input type= "Submit" name= "Submit" value= "AddRow" onclick= "Javascript:addrow ();" >
<input type= "Submit" name= "Submit" value= "Delrow" onclick= "Javascript:delrow (Cgetrow);" >
<input type= "Submit" name= "Submit" value= "Showrow" onclick= "Javascript:showrow ();" > table Dynamic Add row
The usage analysis of JavaScript window.opener
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
