the use of Window.opener
Window.opener returns a reference to the window that created the current window, such as clicking a link on the 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 ID "name" on the a.htm. It can be written as:
Window.opener.document.getElementById ("name"). Value = "entered data";
There is no good understanding of the Window.opener in JavaScript.
Why can't I use it in a frame where the parent window of the pop-up window doesn't work on a page inside the frame? How do you get through the popup window to manipulate the parent window in the frame?
opener.parent.frames[' FrameName '].document.all.input1.value try this:
But when it comes to Window.opener, you can't just say open, these two combinations 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 a child window path
Name is a child window handle
Parameters for window parameters (comma-separated arguments)
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 is run, the page.html will open in the new form NewWindow, the width is 100, the height is 400, from the screen top 0 pixels, the screen left 0 pixels, no toolbar, no menu bar, no scroll bar, not adjustable size, no address bar, no status bar.
In the example above, there are several other parameters that are commonly used, as follows:
Various parameters
Where yes/no can also use 1/0;pixel value as the specific value, the unit pixel.
Parameters | Value Range | Description
alwayslowered | yes/no | Specifies that the window is hidden behind all windows
alwaysraised | yes/no | Specifies 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 NAV2 and 3 columns are visible
Height | Pixel value | Window height
hotkeys | yes/no | Set up a secure exit hotkey in a window without a menu bar
Innerheight | Pixel value | Pixel height of the document in the window
Innerwidth | Pixel value | Pixel width of the document in the window
Location | yes/no | Whether the position bar is visible
MenuBar | yes/no | Whether the menu bar is visible
Outerheight | Pixel value | Set the pixel height of a window (including a decorative border)
Outerwidth | Pixel value | Set the pixel width of a window (including a 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 edge of the screen
ScrollBars | yes/no | Whether a window can have a scroll bar
TitleBar | yes/no | Whether the window topic bar is visible
Toolbar | yes/no | Whether the window toolbar is visible
Width | Pixel value | The pixel width of the window
Z-look | yes/no | Whether the window floats on top of other windows when it is activated
Controlling pop-up windows with functions
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 call it?
Method One:
<body onload= "Openwin ()" >
Pop-up window when the browser reads the page;
Method Two:
<body onunload= "Openwin ()" >
Pop-up window when the browser leaves the page;
Method Three:
Called with a connection:
<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 implement to return a value to the parent window in window.open mode without using window.showModalDialog.
For example: Page aaa.htm with window.open way pop-up page bbb.htm.
Select a value on the page bbb.htm to make sure that the selected value is returned to the parent window aaa.htm after the window is closed.
Aaa.htm The value returned, assign 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 a link on the 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 ID "name" on the a.htm. It can be written as:
Window.opener.document.getElementById ("name"). Value = "entered data";
There is no good understanding of the Window.opener in JavaScript.
Why can't I use it in a frame where the parent window of the pop-up window doesn't work on a page inside the frame? How do you get through the popup window to manipulate the parent window in the frame?
opener.parent.frames[' FrameName '].document.all.input1.value
Opener This object is the previous window, you can use the window.opener.document ... Invoke the relevant methods of document, such as the following example, to insert some table rows to 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 browse (159) Comments (0) Category: JavaScript 2008-02-27
Thumbnail display confirm usage and examples
General Popup dialog box (OK/No)
OK: execute its nested content; No: otherwise
<script language= "JavaScript" >
Validate 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 (!confirm) (' Really want to delete it? You will not be able to recover after deletion! ')){
Return
}
Validate 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!) (for example: (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 ("End date must be greater than 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: XXFarEastFont-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= "closes" name= "B2" style= "border-style:outset; Border-width:1; Color: #0000FF ">
<input onclick= "Surebutton ()" type= "Submit" value= "to 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 on the full name of the path should carefully check whether the correct::</marquee>< /TD>
</tr>
</table>
</div>
</body>
You can bulk delete a table record row, select a deleted row by using a checkbox, and you can increase the number of rows in a batch and specify the lines 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 Line
function AddRow () {
var textnum = document.getElementById ("rownum");
Number of rows to get new Row Records
var index = Textnum.value;
if (!checknum (index)) {
Alert ("Can only be input number in the text!");
Textnum.focus ();
Textnum.select ();
}
for (var i = 0; i < index; i++) {
Get the 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 ' > ';
Add TD node under the new TR node
Newrowobj.appendchild (Newcheckbox);
Newrowobj.appendchild (NEWTEXT1);
Newrowobj.appendchild (NEWTEXT2);
Newrowobj.appendchild (NEWTEXT3);
Add a TR node under the TBODY node
Tablebodyobj.appendchild (Newrowobj);
}
}
New row number 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 the 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 all submitted checkbox
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 rows in a table
Tblen = This.mainTb.rows.length;
Finally keep a row of records
if (Tblen = 1)
{
Document.getelementsbyname ("checkbox") [0].checked = false;
Alert ("A line have to being saved in the ID of maintb!");
Delete Button not available
Delbutton.disabled = true;
return false;
}
ischecked = checkbox[i].checked;
If the current checkbox is checked: Deletes the current node, the cursor (record row pointer) should also be moved up because the node is removed and the following node is moved up
if (ischecked)
{
document.all ("Maintb"). DeleteRow (i);
document.getElementById ("Maintb"). DeleteRow (i);
Cursor (record row pointer) move up
i--;
}
Re-count the number of checkbox
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, you can delete the action, or 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 all submitted checkbox
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;
}
}
Execution 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 row number input box content is empty
Rownum.value = "";
}
</script>
Dynamically add and delete rows, respectively, through the Insertrow,deleterow method, display line number, through the RowIndex property, can basically 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 be deleted.
This index starts from 0 and are relative to the logical order (not document order)
The all rows contained inside the table.
If the index is-1 the last row in 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 the ID of a checkbox in a dynamically changing innerHTML
Alert (_ ("box" + Lineno). ID);
newtd1.innertext= ' new Add line ' + Lineno;
lineno++;
}
function Delrow (iindex) {
Delete a row
if (iindex==-99999) {
Alert ("System prompt: No line number is selected!");
}else{
Iindex = Cgetrow;
_ ("Tab1"). DeleteRow (Iindex);
}
}
function GetRow () {
Get row index
Two parentelement respectively 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" > The first line </td>
</tr>
<tr id= "TR2" >
<TD width=6%><input type=checkbox id= "Box2" onclick= "GetRow ()" ></td>
<TD id= "B" > the second line </td>
</tr>
<tr id= "TR3" >
<TD width=6%><input type=checkbox id= "Box3" onclick= "GetRow ()" ></td>
<TD id= "C" > Third line </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 Increase row
