javascript window.opener的用法分析
更新時(shí)間：2010年04月07日 12:58:58 作者：
window.opener 返回的是創(chuàng)建當(dāng)前窗口的那個(gè)窗口的引用
window.opener 的用法
window.opener 返回的是創(chuàng)建當(dāng)前窗口的那個(gè)窗口的引用，比如點(diǎn)擊了a.htm上的一個(gè)鏈接而打開了b.htm，然后我們打算在b.htm上輸入一個(gè)值然后賦予a.htm上的一個(gè)id為“name”的textbox中，就可以寫為：
window.opener.document.getElementById("name").value = "輸入的數(shù)據(jù)";
對(duì)于javascript中的window.opener沒(méi)有很好的理解。
為什么框架中不能使用，彈出窗口的父窗口不能在框架里面的某個(gè)頁(yè)面呢？那怎樣通過(guò)彈出窗口操作框架中的父窗口呢？
opener.parent.frames['frameName'].document.all.input1.value 試試這個(gè)：）
不過(guò)說(shuō)到window.opener就不能不說(shuō)open,這兩個(gè)結(jié)合起來(lái)才可能一起使用。
window.open()支持環(huán)境： JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+
基本語(yǔ)法：
window.open(pageURL,name,parameters)
其中：
pageURL 為子窗口路徑
name 為子窗口句柄
parameters 為窗口參數(shù)(各參數(shù)用逗號(hào)分隔)
示例：
<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')
//寫成一行
-->
</SCRIPT>
腳本運(yùn)行后，page.html將在新窗體newwindow中打開，寬為100，高為400，距屏頂0象素，屏左0象素，無(wú)工具條，無(wú)菜單條，無(wú)滾動(dòng)條，不可調(diào)整大小，無(wú)地址欄，無(wú)狀態(tài)欄。
上例中涉及的為常用的幾個(gè)參數(shù)，除此以外還有很多其他參數(shù)，如下所示：
各項(xiàng)參數(shù)
其中yes/no也可使用1/0；pixel value為具體的數(shù)值，單位象素。
參數(shù) | 取值范圍 | 說(shuō)明
alwaysLowered | yes/no | 指定窗口隱藏在所有窗口之后
alwaysRaised | yes/no | 指定窗口懸浮在所有窗口之上
depended | yes/no | 是否和父窗口同時(shí)關(guān)閉
directories | yes/no | Nav2和3的目錄欄是否可見
height | pixel value | 窗口高度
hotkeys | yes/no | 在沒(méi)菜單欄的窗口中設(shè)安全退出熱鍵
innerHeight | pixel value | 窗口中文檔的像素高度
innerWidth | pixel value | 窗口中文檔的像素寬度
location | yes/no | 位置欄是否可見
menubar | yes/no | 菜單欄是否可見
outerHeight | pixel value | 設(shè)定窗口(包括裝飾邊框)的像素高度
outerWidth | pixel value | 設(shè)定窗口(包括裝飾邊框)的像素寬度
resizable | yes/no | 窗口大小是否可調(diào)整
screenX | pixel value | 窗口距屏幕左邊界的像素長(zhǎng)度
screenY | pixel value | 窗口距屏幕上邊界的像素長(zhǎng)度
scrollbars | yes/no | 窗口是否可有滾動(dòng)欄
titlebar | yes/no | 窗口題目欄是否可見
toolbar | yes/no | 窗口工具欄是否可見
Width | pixel value | 窗口的像素寬度
z-look | yes/no | 窗口被激活后是否浮在其它窗口之上
用函數(shù)控制彈出窗口
下面是一個(gè)完整的代碼。
<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") //寫成一行
}
</script>
</head>
<body onload="openwin()">
任意的頁(yè)面內(nèi)容...
</body>
</html>
這里定義了一個(gè)函數(shù)openwin(),函數(shù)內(nèi)容就是打開一個(gè)窗口。怎么調(diào)用呢？
方法一：
<body onload="openwin()">
瀏覽器讀頁(yè)面時(shí)彈出窗口；
方法二：
<body onunload="openwin()">
瀏覽器離開頁(yè)面時(shí)彈出窗口；
方法三：
用一個(gè)連接調(diào)用：
<a href="#" onclick="openwin()">打開一個(gè)窗口</a>
注意：使用的“#”是虛連接。
方法四：
用一個(gè)按鈕調(diào)用：
<input type="button" onclick="openwin()" value="打開窗口">
如何實(shí)現(xiàn)在不使用window.showModalDialog 的情況下用 window.open方式 向父窗口返回值。
例如： 頁(yè)面AAA.htm 用 window.open方式彈出頁(yè)面 BBB.htm 。
在頁(yè)面BBB.htm上選擇一個(gè)值，確定關(guān)閉窗口后將選擇的這個(gè)值返回到父窗口AAA.htm。
AAA.htm得到返回的值后，給本頁(yè)面上的文本框賦值。
BBB.htm頁(yè)面中加入下面代碼：
window.opener.document.getElementById("theTextAreaId").value = document.getElemnetById("theSelectId").value ;
window.opener 的用法
window.opener 返回的是創(chuàng)建當(dāng)前窗口的那個(gè)父窗口的引用，比如點(diǎn)擊了a.htm上的一個(gè)鏈接而打開了b.htm，然后我們打算在b.htm上輸入一個(gè)值然后賦予a.htm上的一個(gè)id為“name”的textbox中，就可以寫為：
window.opener.document.getElementById("name").value = "輸入的數(shù)據(jù)";
對(duì)于javascript中的window.opener沒(méi)有很好的理解。
為什么框架中不能使用，彈出窗口的父窗口不能在框架里面的某個(gè)頁(yè)面呢？那怎樣通過(guò)彈出窗口操作框架中的父窗口呢？
opener.parent.frames['frameName'].document.all.input1.value
即opener這個(gè)對(duì)象為前一個(gè)窗口，可以使用window.opener.document...調(diào)用document的相關(guān)方法，例如下面的例子，插入一些table行到前一個(gè)窗口：
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"><img src="../../../images/delete2.gif" width="12" height="12" onClick="userRightDel(this);"><input type="hidden" name="itembox" value='+itemCode+'></div>');
} 11:56 瀏覽 (159) 評(píng)論 (0) 分類: JavaScript 2008-02-27
縮略顯示confirm用法和例子
一般用于彈出對(duì)話框（確定／否）
確定：就執(zhí)行其嵌套的內(nèi)容；否：則反之
<script language="javascript">
//驗(yàn)證時(shí)間格式 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('真的要?jiǎng)h除嗎？刪除后將無(wú)法恢復(fù)！')){
return;
}
//驗(yàn)證時(shí)間格式 YYYY-MM-DD
var startDate=document.getElementById("startDate").value;
var endDate=document.getElementById("endDate").value;
if(!isDate(startDate)){
alert(startDate+"請(qǐng)輸入正確的開始日期格式!如:(YYYY-MM-DD)2008-01-01");
return document.getElementById("startDate").focus();
}
if(!isDate(endDate)){
alert("請(qǐng)輸入正確的結(jié)束日期格式!如:(YYYY-MM-DD)2008-01-01");
return document.getElementById("endDate").focus();
}
if(startDate==""){
alert("請(qǐng)輸入開始日期");
return document.getElementById("startDate").focus();
}
if(endDate==""){
alert("請(qǐng)輸入結(jié)束日期");
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("結(jié)束日期必須大于開始日期");
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">開始日期</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">結(jié)束日期</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">當(dāng)前狀態(tài)</font></td>
<td width="18%" align="center" height="25">
<select size="1" name="display">
<option value="0">無(wú)效</option>
<option value="1">等待</option>
<option value="2" selected>顯示中</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行寬</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">顯示順序</font></td>
<td width="5%" >
<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="關(guān)閉" name="B2" style="border-style: outset; border-width: 1; color:#0000FF">
<input onclick="sureButton()" type="submit" value="確定" 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">::日期格式為年-月-日,直接填入圖片和點(diǎn)擊路徑全名時(shí)應(yīng)仔細(xì)查對(duì)是否正確::</marquee></td>
</tr>
</table>
</div>
</body>
</html>
可以批量刪除表格記錄行，通過(guò)checkbox選擇刪除的行；可以批量增加記錄行，通過(guò)輸入框指定行數(shù)。
<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">
// 新增行
function addRow(){
var textNum = document.getElementById("rownum");
// 得到新增行記錄的行數(shù)
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++){
// 得到表格對(duì)象
var tableObj = document.getElementById("mainTb");
// 得到tbody對(duì)象
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">';
// 新增的tr節(jié)點(diǎn)下增加td節(jié)點(diǎn)
newRowObj.appendChild(newCheckBox);
newRowObj.appendChild(newtext1);
newRowObj.appendChild(newtext2);
newRowObj.appendChild(newtext3);
// tbody節(jié)點(diǎn)下增加tr節(jié)點(diǎn)
tableBodyObj.appendChild(newRowObj);
}
}
// 新增行數(shù)選擇框檢查輸入必須是數(shù)字
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;
}
// 批量刪除指定的行
function deleteRow(){
var Tblen;
// 得到所有 checkbox 對(duì)象
var checkbox = document.getElementsByName("checkbox");
//var checkboxlen = document.all.checkbox.length;
// 得到所有提交的checkbox個(gè)數(shù)
var checkboxlen = checkbox.length;
var ischecked;
// 得到刪除按鈕對(duì)象
var delbutton = document.getElementById("delete");
for (var i=0; i < checkboxlen; i++){
// 得到表格行數(shù)
Tblen = this.mainTb.rows.length;
// 最終保留一行記錄
if (Tblen == 1)
{
document.getElementsByName("checkbox")[0].checked = false;
alert("A line have to be saved in the ID of mainTb!");
// 刪除按鈕不可用
delbutton.disabled = true;
return false;
}
ischecked = checkbox[i].checked;
// 如果當(dāng)前的checkbox選中：刪除當(dāng)前節(jié)點(diǎn)，由于刪除節(jié)點(diǎn)后，下面的節(jié)點(diǎn)上移，游標(biāo)（記錄行指針）也應(yīng)該上移
if (ischecked)
{
// document.all("mainTb").deleteRow(i);
document.getElementById("mainTb").deleteRow(i);
// 游標(biāo)（記錄行指針）上移
i--;
}
// 重新統(tǒng)計(jì)checkbox個(gè)數(shù)
checkboxlen = checkbox.length;
}
// 刪除操作后按鈕狀態(tài)是不可用
delbutton.disabled = true;
}
// checkbox按鈕單擊事件處理函數(shù)：是否至少選中一行記錄，是可以刪除操作；如果沒(méi)有選擇，刪除按鈕不可用
function checkBoxSel(){
// 得到刪除按鈕對(duì)象
var delbutton = document.getElementById("delete");
if(checkselect()){
delbutton.disabled = false;
}else{
delbutton.disabled = true;
}
}
function checkselect(){
// 得到所有 checkbox 對(duì)象
var checkbox = document.getElementsByName("checkbox");
// 得到所有提交的checkbox個(gè)數(shù)
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;
}
}
// 頁(yè)面加載body內(nèi)容時(shí)執(zhí)行
function loadpage(){
var delbutton = document.getElementById("delete");
var rownum = document.getElementById("rownum");
// 初始“刪除”按鈕不可用
delbutton.disabled = true;
// 初始行數(shù)輸入框內(nèi)容為空
rownum.value = "";
}
</script>
動(dòng)態(tài)添加、刪除行，分別通過(guò)insertRow，deleteRow方法實(shí)現(xiàn)，顯示行號(hào)，通過(guò)rowIndex屬性獲得，基本可以動(dòng)態(tài)實(shí)現(xiàn)相關(guān)功能。
<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(){
//添加一行
var newTr = _("tab1").insertRow();
//添加兩列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
//設(shè)置列內(nèi)容和屬性
newTd0.innerHTML = '<input type=checkbox id="box' + lineNo + '" onClick="GetRow()">';
// 測(cè)試動(dòng)態(tài)改變innerHTML中的checkbox的id
alert(_("box" + lineNo).id);
newTd1.innerText= '新增加行' + lineNo;
lineNo++;
}
function DelRow(iIndex){
//刪除一行
if(iIndex==-99999){
alert("系統(tǒng)提示：沒(méi)有選中行號(hào)!");
}else{
iIndex = cGetRow;
_("tab1").deleteRow(iIndex);
}
}
function GetRow(){
//獲得行索引
//兩個(gè)parentElement分別是TD和TR喲，rowIndex是TR的屬性
//this.parentElement.parentElement.rowIndex
cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex;
}
function ShowRow(){
//顯示行號(hào)
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">第一行</td>
</tr>
<tr id="tr2">
<td width=6%><input type=checkbox id="box2" onClick="GetRow()"></td>
<td id="b">第二行</td>
</tr>
<tr id="tr3">
<td width=6%><input type=checkbox id="box3" onClick="GetRow()"></td>
<td id="c">第三行</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">統(tǒng)計(jì)</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();"> 表格動(dòng)態(tài)增加行
window.opener 返回的是創(chuàng)建當(dāng)前窗口的那個(gè)窗口的引用，比如點(diǎn)擊了a.htm上的一個(gè)鏈接而打開了b.htm，然后我們打算在b.htm上輸入一個(gè)值然后賦予a.htm上的一個(gè)id為“name”的textbox中，就可以寫為：
window.opener.document.getElementById("name").value = "輸入的數(shù)據(jù)";
對(duì)于javascript中的window.opener沒(méi)有很好的理解。
為什么框架中不能使用，彈出窗口的父窗口不能在框架里面的某個(gè)頁(yè)面呢？那怎樣通過(guò)彈出窗口操作框架中的父窗口呢？
opener.parent.frames['frameName'].document.all.input1.value 試試這個(gè)：）
不過(guò)說(shuō)到window.opener就不能不說(shuō)open,這兩個(gè)結(jié)合起來(lái)才可能一起使用。
window.open()支持環(huán)境： JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+
基本語(yǔ)法：
window.open(pageURL,name,parameters)
其中：
pageURL 為子窗口路徑
name 為子窗口句柄
parameters 為窗口參數(shù)(各參數(shù)用逗號(hào)分隔)
示例：
<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')
//寫成一行
-->
</SCRIPT>
腳本運(yùn)行后，page.html將在新窗體newwindow中打開，寬為100，高為400，距屏頂0象素，屏左0象素，無(wú)工具條，無(wú)菜單條，無(wú)滾動(dòng)條，不可調(diào)整大小，無(wú)地址欄，無(wú)狀態(tài)欄。
上例中涉及的為常用的幾個(gè)參數(shù)，除此以外還有很多其他參數(shù)，如下所示：
各項(xiàng)參數(shù)
其中yes/no也可使用1/0；pixel value為具體的數(shù)值，單位象素。
參數(shù) | 取值范圍 | 說(shuō)明
alwaysLowered | yes/no | 指定窗口隱藏在所有窗口之后
alwaysRaised | yes/no | 指定窗口懸浮在所有窗口之上
depended | yes/no | 是否和父窗口同時(shí)關(guān)閉
directories | yes/no | Nav2和3的目錄欄是否可見
height | pixel value | 窗口高度
hotkeys | yes/no | 在沒(méi)菜單欄的窗口中設(shè)安全退出熱鍵
innerHeight | pixel value | 窗口中文檔的像素高度
innerWidth | pixel value | 窗口中文檔的像素寬度
location | yes/no | 位置欄是否可見
menubar | yes/no | 菜單欄是否可見
outerHeight | pixel value | 設(shè)定窗口(包括裝飾邊框)的像素高度
outerWidth | pixel value | 設(shè)定窗口(包括裝飾邊框)的像素寬度
resizable | yes/no | 窗口大小是否可調(diào)整
screenX | pixel value | 窗口距屏幕左邊界的像素長(zhǎng)度
screenY | pixel value | 窗口距屏幕上邊界的像素長(zhǎng)度
scrollbars | yes/no | 窗口是否可有滾動(dòng)欄
titlebar | yes/no | 窗口題目欄是否可見
toolbar | yes/no | 窗口工具欄是否可見
Width | pixel value | 窗口的像素寬度
z-look | yes/no | 窗口被激活后是否浮在其它窗口之上
用函數(shù)控制彈出窗口
下面是一個(gè)完整的代碼。
<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") //寫成一行
}
</script>
</head>
<body onload="openwin()">
任意的頁(yè)面內(nèi)容...
</body>
</html>
這里定義了一個(gè)函數(shù)openwin(),函數(shù)內(nèi)容就是打開一個(gè)窗口。怎么調(diào)用呢？
方法一：
<body onload="openwin()">
瀏覽器讀頁(yè)面時(shí)彈出窗口；
方法二：
<body onunload="openwin()">
瀏覽器離開頁(yè)面時(shí)彈出窗口；
方法三：
用一個(gè)連接調(diào)用：
<a href="#" onclick="openwin()">打開一個(gè)窗口</a>
注意：使用的“#”是虛連接。
方法四：
用一個(gè)按鈕調(diào)用：
<input type="button" onclick="openwin()" value="打開窗口">
如何實(shí)現(xiàn)在不使用window.showModalDialog 的情況下用 window.open方式 向父窗口返回值。
例如： 頁(yè)面AAA.htm 用 window.open方式彈出頁(yè)面 BBB.htm 。
在頁(yè)面BBB.htm上選擇一個(gè)值，確定關(guān)閉窗口后將選擇的這個(gè)值返回到父窗口AAA.htm。
AAA.htm得到返回的值后，給本頁(yè)面上的文本框賦值。
BBB.htm頁(yè)面中加入下面代碼：
window.opener.document.getElementById("theTextAreaId").value = document.getElemnetById("theSelectId").value ;
window.opener 的用法
window.opener 返回的是創(chuàng)建當(dāng)前窗口的那個(gè)父窗口的引用，比如點(diǎn)擊了a.htm上的一個(gè)鏈接而打開了b.htm，然后我們打算在b.htm上輸入一個(gè)值然后賦予a.htm上的一個(gè)id為“name”的textbox中，就可以寫為：
window.opener.document.getElementById("name").value = "輸入的數(shù)據(jù)";
對(duì)于javascript中的window.opener沒(méi)有很好的理解。
為什么框架中不能使用，彈出窗口的父窗口不能在框架里面的某個(gè)頁(yè)面呢？那怎樣通過(guò)彈出窗口操作框架中的父窗口呢？
opener.parent.frames['frameName'].document.all.input1.value
即opener這個(gè)對(duì)象為前一個(gè)窗口，可以使用window.opener.document...調(diào)用document的相關(guān)方法，例如下面的例子，插入一些table行到前一個(gè)窗口：
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"><img src="../../../images/delete2.gif" width="12" height="12" onClick="userRightDel(this);"><input type="hidden" name="itembox" value='+itemCode+'></div>');
} 11:56 瀏覽 (159) 評(píng)論 (0) 分類: JavaScript 2008-02-27
縮略顯示confirm用法和例子
一般用于彈出對(duì)話框（確定／否）
確定：就執(zhí)行其嵌套的內(nèi)容；否：則反之
<script language="javascript">
//驗(yàn)證時(shí)間格式 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('真的要?jiǎng)h除嗎？刪除后將無(wú)法恢復(fù)！')){
return;
}
//驗(yàn)證時(shí)間格式 YYYY-MM-DD
var startDate=document.getElementById("startDate").value;
var endDate=document.getElementById("endDate").value;
if(!isDate(startDate)){
alert(startDate+"請(qǐng)輸入正確的開始日期格式!如:(YYYY-MM-DD)2008-01-01");
return document.getElementById("startDate").focus();
}
if(!isDate(endDate)){
alert("請(qǐng)輸入正確的結(jié)束日期格式!如:(YYYY-MM-DD)2008-01-01");
return document.getElementById("endDate").focus();
}
if(startDate==""){
alert("請(qǐng)輸入開始日期");
return document.getElementById("startDate").focus();
}
if(endDate==""){
alert("請(qǐng)輸入結(jié)束日期");
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("結(jié)束日期必須大于開始日期");
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">開始日期</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">結(jié)束日期</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">當(dāng)前狀態(tài)</font></td>
<td width="18%" align="center" height="25">
<select size="1" name="display">
<option value="0">無(wú)效</option>
<option value="1">等待</option>
<option value="2" selected>顯示中</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行寬</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">顯示順序</font></td>
<td width="5%" >
<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="關(guān)閉" name="B2" style="border-style: outset; border-width: 1; color:#0000FF">
<input onclick="sureButton()" type="submit" value="確定" 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">::日期格式為年-月-日,直接填入圖片和點(diǎn)擊路徑全名時(shí)應(yīng)仔細(xì)查對(duì)是否正確::</marquee></td>
</tr>
</table>
</div>
</body>
</html>
可以批量刪除表格記錄行，通過(guò)checkbox選擇刪除的行；可以批量增加記錄行，通過(guò)輸入框指定行數(shù)。
<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">
// 新增行
function addRow(){
var textNum = document.getElementById("rownum");
// 得到新增行記錄的行數(shù)
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++){
// 得到表格對(duì)象
var tableObj = document.getElementById("mainTb");
// 得到tbody對(duì)象
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">';
// 新增的tr節(jié)點(diǎn)下增加td節(jié)點(diǎn)
newRowObj.appendChild(newCheckBox);
newRowObj.appendChild(newtext1);
newRowObj.appendChild(newtext2);
newRowObj.appendChild(newtext3);
// tbody節(jié)點(diǎn)下增加tr節(jié)點(diǎn)
tableBodyObj.appendChild(newRowObj);
}
}
// 新增行數(shù)選擇框檢查輸入必須是數(shù)字
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;
}
// 批量刪除指定的行
function deleteRow(){
var Tblen;
// 得到所有 checkbox 對(duì)象
var checkbox = document.getElementsByName("checkbox");
//var checkboxlen = document.all.checkbox.length;
// 得到所有提交的checkbox個(gè)數(shù)
var checkboxlen = checkbox.length;
var ischecked;
// 得到刪除按鈕對(duì)象
var delbutton = document.getElementById("delete");
for (var i=0; i < checkboxlen; i++){
// 得到表格行數(shù)
Tblen = this.mainTb.rows.length;
// 最終保留一行記錄
if (Tblen == 1)
{
document.getElementsByName("checkbox")[0].checked = false;
alert("A line have to be saved in the ID of mainTb!");
// 刪除按鈕不可用
delbutton.disabled = true;
return false;
}
ischecked = checkbox[i].checked;
// 如果當(dāng)前的checkbox選中：刪除當(dāng)前節(jié)點(diǎn)，由于刪除節(jié)點(diǎn)后，下面的節(jié)點(diǎn)上移，游標(biāo)（記錄行指針）也應(yīng)該上移
if (ischecked)
{
// document.all("mainTb").deleteRow(i);
document.getElementById("mainTb").deleteRow(i);
// 游標(biāo)（記錄行指針）上移
i--;
}
// 重新統(tǒng)計(jì)checkbox個(gè)數(shù)
checkboxlen = checkbox.length;
}
// 刪除操作后按鈕狀態(tài)是不可用
delbutton.disabled = true;
}
// checkbox按鈕單擊事件處理函數(shù)：是否至少選中一行記錄，是可以刪除操作；如果沒(méi)有選擇，刪除按鈕不可用
function checkBoxSel(){
// 得到刪除按鈕對(duì)象
var delbutton = document.getElementById("delete");
if(checkselect()){
delbutton.disabled = false;
}else{
delbutton.disabled = true;
}
}
function checkselect(){
// 得到所有 checkbox 對(duì)象
var checkbox = document.getElementsByName("checkbox");
// 得到所有提交的checkbox個(gè)數(shù)
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;
}
}
// 頁(yè)面加載body內(nèi)容時(shí)執(zhí)行
function loadpage(){
var delbutton = document.getElementById("delete");
var rownum = document.getElementById("rownum");
// 初始“刪除”按鈕不可用
delbutton.disabled = true;
// 初始行數(shù)輸入框內(nèi)容為空
rownum.value = "";
}
</script>
動(dòng)態(tài)添加、刪除行，分別通過(guò)insertRow，deleteRow方法實(shí)現(xiàn)，顯示行號(hào)，通過(guò)rowIndex屬性獲得，基本可以動(dòng)態(tài)實(shí)現(xiàn)相關(guān)功能。
<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(){
//添加一行
var newTr = _("tab1").insertRow();
//添加兩列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
//設(shè)置列內(nèi)容和屬性
newTd0.innerHTML = '<input type=checkbox id="box' + lineNo + '" onClick="GetRow()">';
// 測(cè)試動(dòng)態(tài)改變innerHTML中的checkbox的id
alert(_("box" + lineNo).id);
newTd1.innerText= '新增加行' + lineNo;
lineNo++;
}
function DelRow(iIndex){
//刪除一行
if(iIndex==-99999){
alert("系統(tǒng)提示：沒(méi)有選中行號(hào)!");
}else{
iIndex = cGetRow;
_("tab1").deleteRow(iIndex);
}
}
function GetRow(){
//獲得行索引
//兩個(gè)parentElement分別是TD和TR喲，rowIndex是TR的屬性
//this.parentElement.parentElement.rowIndex
cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex;
}
function ShowRow(){
//顯示行號(hào)
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">第一行</td>
</tr>
<tr id="tr2">
<td width=6%><input type=checkbox id="box2" onClick="GetRow()"></td>
<td id="b">第二行</td>
</tr>
<tr id="tr3">
<td width=6%><input type=checkbox id="box3" onClick="GetRow()"></td>
<td id="c">第三行</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">統(tǒng)計(jì)</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();"> 表格動(dòng)態(tài)增加行
您可能感興趣的文章:
- javascript打開新窗口同時(shí)關(guān)閉舊窗口
- javascript showModalDialog傳值與FireFox的window.open 父子窗口傳值示例
- javascript彈出窗口 window.open使用方法以及參數(shù)說(shuō)明分析篇
- javascript 打開頁(yè)面window.location和window.open的區(qū)別
- Flex調(diào)Javascript打開新窗口示例代碼
- javascript:window.open彈出窗口的位置問(wèn)題
- javascript window.open打開新窗口后無(wú)法再次打開該窗口問(wèn)題的解決方法
- javascript使用window.open提示“已經(jīng)計(jì)劃系統(tǒng)關(guān)機(jī)”的原因
- Javascript中封裝window.open解決不兼容問(wèn)題
- JavaScript中window.open用法實(shí)例詳解
- javascript中window.open在原來(lái)的窗口中打開新的窗口(不同名)
相關(guān)文章
高性能的javascript之加載順序與執(zhí)行原理篇
這篇文章主要給大家介紹了關(guān)于高性能的javascript之加載順序與執(zhí)行原理的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
Javascript模塊化編程(三)require.js的用法及功能介紹
這個(gè)系列的第一部分和第二部分，介紹了Javascript模塊原型和理論概念，今天介紹如何將它們用于實(shí)戰(zhàn)。我采用的是一個(gè)非常流行的庫(kù)require.js感興趣的朋友可以了解下啊2013-01-01
Javascript實(shí)例教程(19) 使用HoTMetal(2)
Javascript實(shí)例教程(19) 使用HoTMetal(2)...2006-12-12
對(duì)new functionName()定義一個(gè)函數(shù)的理解
這篇文章主要介紹了對(duì)new functionName()定義一個(gè)函數(shù)的理解,需要的朋友可以參考下2014-05-05
JavaScript函數(shù)表達(dá)式詳解及實(shí)例
這篇文章主要介紹了JavaScript函數(shù)表達(dá)式詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了ECMAscript 變量作用域，通過(guò)使用var操作符聲明和未使用var操作符聲明兩種情景做出了解釋，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
這篇文章介紹了JS獲取表單中的元素和取值方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-04-04
JavaScript事件列表解說(shuō)...2006-12-12
JS的document.all函數(shù)在使用中非常的頻繁，下面為大家詳細(xì)介紹下具體的使用示例2013-12-12
這篇文章主要為大家介紹了 javascript七大數(shù)據(jù)類型，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-12-12