Home > Developer > JavaScript
Window. opener usage
In a textbox with the id "name" on window. opener worker, you can write it:
Optional values opener.doc ument. getElementById ("name"). value = "input data ";
I have no good understanding of window. opener in javascript.
Why is it unavailable in the framework, and the pop-up window's parent window cannot be on a page in the framework? Then how can I use the pop-up window to operate the parent window in the framework?
Opener.parent.frames{'framename'}.doc ument. all. input1.value try this one :)
However, when it comes to window. opener, we can't leave it alone. These two can be used together.
Window. open () support environment: JavaScript1.0 +/JScript1.0 +/Nav2 +/IE3 +/Opera3 +
Basic Syntax:
Window. open (pageURL, name, parameters)
Where:
PageURL is the sub-window path
Name is the sub-window handle
Parameters is window parameters (parameters are 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 row
-->
</SCRIPT>
After running the script, page.html will be opened in the newwindow of the new form, with a width of 100 and a height of 400. It is 0 pixels away from the screen top, 0 pixels left, no tool bar, no menu bar, no scroll bar, and cannot be adjusted, no address bar, no status bar.
The preceding example involves several common parameters. In addition, there are many other parameters, as shown below:
Parameters
Here, yes/no can also use 1/0; pixel value is a specific value, in pixels.
Parameter | value range | description
AlwaysLowered | yes/no | specifies that the window is hidden behind all windows
AlwaysRaised | yes/no | specify 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 directory bar of Nav2 and 3 is visible
Height | pixel value | window height
Hotkeys | yes/no | set the Security Exit hotkey in the window without 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 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 | pixel length between the window and the left boundary of the screen
ScreenY | pixel value | pixel length between the window and the upper boundary of the screen
Scrollbars | yes/no | whether the window has a scroll bar
Titlebar | yes/no | whether the title bar of the window is visible
Toolbar | yes/no | whether the toolbar of the window is visible
Width | pixel value | pixel Width of the window
Z-look | yes/no | whether the window floated above other windows after being activated
Function Control pop-up window
The following is a complete code.
<Html>
<Head>
<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 row
}
</Script>
</Head>
<Body onload = "openwin ()">
Any page content...
</Body>
</Html>
A function openwin () is defined here, and the function content is to open a window. How to call it?
Method 1:
<Body onload = "openwin ()">
A window pops up when the browser reads the page;
Method 2:
<Body onunload = "openwin ()">
A window pops up when the browser leaves the page;
Method 3:
Call with a connection:
<A href = "#" onclick = "openwin ()"> open a window. </a>
Note: "#" is a virtual connection.
Method 4:
Call with a button:
<Input type = "button" onclick = "openwin ()" value = "open window">
How to return a value to the parent window without window. showModalDialog.
For example, page aaa.htm uses window. open to pop up the page BBB.htm.
On the page, select a value for bbb.htmand close the window to return the selected value to the parent window aaa.htm.
After AAA.htm obtains the returned value, it assigns a value to the text box on this page.
Add the following code to the BBB.htm page:
Extends extends opener.doc ument. getElementById ("theTextAreaId"). value = document. getElemnetById ("theSelectId"). value;
Window. opener usage
In a textbox with the id "name" on window. opener worker, you can write it:
Optional values opener.doc ument. getElementById ("name"). value = "input data ";
I have no good understanding of window. opener in javascript.
Why is it unavailable in the framework, and the pop-up window's parent window cannot be on a page in the framework? Then how can I use the pop-up window to operate the parent window in the framework?
Opener.parent.frames{'framename'}.doc ument. all. input1.value
That is to say, the openerobject is the first window. You can call the document-related method by using javaser.doc ument.... For example, in the following example, insert some table rows to the previous window:
Function taletoTb (itemStr ){
NewRow = opener.document.all.itemTb.insertRow(opener.doc ument. all. itemTb. rows. length );
RowCnt = opener.doc ument. 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) classification: JavaScript 2008-02-27
Scale down to show confirm usage and Examples
It is usually used to pop up a dialog box (OK/No)
OK: execute its nested content; NO: the opposite
<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 (! Confirm ('Are you sure you want to delete it? Deleted files cannot be restored! ')){
Return;
}
// Validate the time format YYYY-MM-DD
Var startDate = document. getElementById ("startDate"). value;
Var endDate = document. getElementById ("endDate"). value;
If (! IsDate (startDate )){
Alert (startDate + "enter the correct start date format! Example: (YYYY-MM-DD ");
Return document. getElementById ("startDate"). focus ();
}
If (! IsDate (endDate )){
Alert ("enter the correct end date format! Example: (YYYY-MM-DD ");
Return document. getElementById ("endDate"). focus ();
}
If (startDate = ""){
Alert ("Enter the start date ");
Return document. getElementById ("startDate"). focus ();
}
If (endDate = ""){
Alert ("Enter 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 later than the start date ");
Return document. getElementById ("endDate"). focus ();
}
}
</Script>
<Html>
<Head>
<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:; font-size: 12px; height: 12}
T1 {color: #008000; align: center}
</Style>
</Head>
<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 = "17">
<Tr>
<Td width = "19%" height = "25" 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 = "15"> </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 = "15"> </td>
</Tr>
</Table>
</Td>
</Tr>
<Tr>
<Td height = "28" 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 =" 17 ">
<Tr>
<Td width = "14%" align = "center" height = "25">
<Font color = "#008000"> Current Status </font> </td>
<Td width = "18%" align = "center" height = "25">
<Select size = "1" name = "display">
<Option value = "0"> invalid </option>
<Option value = "1"> waiting </option>
<Option value = "2" selected> display </option>
</Select> </td>
<Td width = "15%" align = "center" height = "25" style = "border-left: 1px solid #000080; border-right-width: 1; border-top-width: 1; border-bottom-width: 1 ">
<Font color = "#008000"> Logo width </font> </td>
<Td width = "10%" align = "center" height = "25">
<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 sequence </font> </td>
& Lt; td width = "5%" & gt;
<Input name = "displayOrder" type = "text" id = "displayOrder" size = "3" value = "1">
</Td>
<Td width = "43%" align = "center" height = "25" 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 = "close" name = "B2" style = "border-style: outset; border-width: 1; color: # 0000FF ">
<Input onclick = "sureButton ()" type = "submit" value = "OK" name = "B1" style = "border-style: outset; border-width: 1; color: # 0000FF "> </td>
</Tr>
</Table>
</Td>
</Tr>
<Tr>
<Td height = "20" colspan = "3" align = "center" style = "border: 1px solid #000080;">
<Marquee behavior = "slide" style = "color: #808080">: The date format is year-month-day. You must enter the full name of the image and click path to check whether it is correct:: </marquee> </td>
</Tr>
</Table>
</Div>
</Body>
</Html>
You can delete record rows in a table in batches and select the deleted rows through the checkbox. You can add record rows in batches and specify the number of rows in the input box.
<Html>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = shift-js">
<Title> The page of append rows to Table </title>
<Script language = "JavaScript">
// Add a row
Function addRow (){
Var textNum = document. getElementById ("rownum ");
// Obtain the number of new Row Records
Var index = textNum. value;
If (! Checknum (index )){
Alert ("You can only input number in the TEXT! ");
TextNum. focus ();
TextNum. select ();
}
For (var I = 0; I <index; I ++ ){
// Obtain the table object
Var tableObj = document. getElementById ("mainTb ");
// Obtain the 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 a td node under the newly added tr Node
NewRowObj. appendChild (newCheckBox );
NewRowObj. appendChild (newtext1 );
NewRowObj. appendChild (newtext2 );
NewRowObj. appendChild (newtext3 );
// Add the tr node under the tbody Node
TableBodyObj. appendChild (newRowObj );
}
}
// Check whether the input value must be a number in the new row selection box.
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;
}
// Delete specified rows in batches
Function deleteRow (){
Var Tblen;
// Get all the checkbox objects
Var checkbox = document. getElementsByName ("checkbox ");
// Var checkboxlen = document. all. checkbox. length;
// Obtain the number of all submitted checkboxes
Var checkboxlen = checkbox. length;
Var ischecked;
// Get the delete button object
Var delbutton = document. getElementById ("delete ");
For (var I = 0; I <checkboxlen; I ++ ){
// Obtain the number of rows in the table
Tblen = this. mainTb. rows. length;
// Keep a row of records
If (Tblen = 1)
{
Document. getElementsByName ("checkbox") [0]. checked = false;
Alert ("A line have to be saved in the ID of mainTb! ");
// The delete button is unavailable.
Delbutton. disabled = true;
Return false;
}
Ischecked = checkbox [I]. checked;
// If the current checkbox is selected: Delete the current node, the cursor (record row pointer) should also be moved up after the node is deleted.
If (ischecked)
{
// Document. all ("mainTb"). deleteRow (I );
Document. getElementById ("mainTb"). deleteRow (I );
// Cursor (record row pointer) Move Up
I --;
}
// Re-count the checkbox count
Checkboxlen = checkbox. length;
}
// After the delete operation, the button status is unavailable.
Delbutton. disabled = true;
}
// When the checkbox button is clicked, click the event handler function to check whether at least one row of record is selected. If not selected, the delete button is unavailable.
Function checkBoxSel (){
// Get the delete button object
Var delbutton = document. getElementById ("delete ");
If (checkselect ()){
Delbutton. disabled = false;
} Else {
Delbutton. disabled = true;
}
}
Function checkselect (){
// Get all the checkbox objects
Var checkbox = document. getElementsByName ("checkbox ");
// Obtain the number of all submitted checkboxes
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;
}
}
// Executed when the page loads the body content
Function loadpage (){
Var delbutton = document. getElementById ("delete ");
Var rownum = document. getElementById ("rownum ");
// The initial "delete" button is unavailable.
Delbutton. disabled = true;
// The content of the input box for the initial number of rows is null.
Rownum. value = "";
}
</Script>
Dynamically add and delete rows by using the insertRow and deleteRow methods, displaying row numbers and obtaining them using the rowIndex attribute can basically achieve dynamic 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 is relative to the logical order (not document order)
// Of all the 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 the column content and attributes
NewTd0.innerHTML = '<input type = checkbox id = "box' + lineNo +'" onClick = "GetRow ()"> ';
// Test the dynamic change of the checkbox id in innerHTML
Alert (_ ("box" + lineNo). id );
NewTd1.innerText = 'add new line' + lineNo;
LineNo ++;
}
Function DelRow (iIndex ){
// Delete a row
If (iIndex ==- 99999 ){
Alert ("system prompt: no row is selected! ");
} Else {
IIndex = cGetRow;
_ ("Tab1"). deleteRow (iIndex );
}
}
Function GetRow (){
// Obtain the row Index
// The two parentelements are TD and TR respectively, and rowIndex is the attribute of TR.
// This. parentElement. parentElement. rowIndex
CGetRow = window. event. srcElement. parentElement. parentElement. rowIndex;
}
Function ShowRow (){
// Display the row number
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"> Row 2 </td>
</Tr>
<Tr id = "tr3">
<Td width = 6%> <input type = checkbox id = "box3" onClick = "GetRow ()"> </td>
<Td id = "c"> Row 3 </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 ();"> dynamically Add rows to a table
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
