javascript window.opener的用法分析

window.opener 的用法

　　window.opener 返回的是创建当前窗口的那个窗口的引用，比如点击了a.htm上的一个链接而打开了b.htm，然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为“name”的textbox中，就可以写为：

　　window.opener.document.getElementById("name").value = "输入的数据";

　　对于javascript中的window.opener没有很好的理解。

　　为什么框架中不能使用，弹出窗口的父窗口不能在框架里面的某个页面呢？那怎样通过弹出窗口操作框架中的父窗口呢？

　　opener.parent.frames['frameName'].document.all.input1.value 试试这个：）

　　不过说到window.opener就不能不说open,这两个结合起来才可能一起使用。

　　window.open()支持环境： JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+

　　基本语法：

　　window.open(pageURL,name,parameters)

　　其中：

　　pageURL 为子窗口路径

　　name 为子窗口句柄

　　parameters 为窗口参数(各参数用逗号分隔)

　　示例：

<!--

　　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>

　　脚本运行后，page.html将在新窗体newwindow中打开，宽为100，高为400，距屏顶0象素，屏左0象素，无工具条，无菜单条，无滚动条，不可调整大小，无地址栏，无状态栏。

　　上例中涉及的为常用的几个参数，除此以外还有很多其他参数，如下所示：

　　各项参数

　　其中yes/no也可使用1/0；pixel value为具体的数值，单位象素。

　　参数 | 取值范围 | 说明

　　alwaysLowered | yes/no | 指定窗口隐藏在所有窗口之后

　　alwaysRaised | yes/no | 指定窗口悬浮在所有窗口之上

　　depended | yes/no | 是否和父窗口同时关闭

　　directories | yes/no | Nav2和3的目录栏是否可见

　　height | pixel value | 窗口高度

　　hotkeys | yes/no | 在没菜单栏的窗口中设安全退出热键

　　innerHeight | pixel value | 窗口中文档的像素高度

　　innerWidth | pixel value | 窗口中文档的像素宽度

　　location | yes/no | 位置栏是否可见

　　menubar | yes/no | 菜单栏是否可见

　　outerHeight | pixel value | 设定窗口(包括装饰边框)的像素高度

　　outerWidth | pixel value | 设定窗口(包括装饰边框)的像素宽度

　　resizable | yes/no | 窗口大小是否可调整

　　screenX | pixel value | 窗口距屏幕左边界的像素长度

　　screenY | pixel value | 窗口距屏幕上边界的像素长度

　　scrollbars | yes/no | 窗口是否可有滚动栏

　　titlebar | yes/no | 窗口题目栏是否可见

　　toolbar | yes/no | 窗口工具栏是否可见

　　Width | pixel value | 窗口的像素宽度

　　z-look | yes/no | 窗口被激活后是否浮在其它窗口之上

　　用函数控制弹出窗口

　　下面是一个完整的代码。

　　<html>

　　<head>

　　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>

　　</html>

　　这里定义了一个函数openwin(),函数内容就是打开一个窗口。怎么调用呢？

　　方法一：

　　浏览器读页面时弹出窗口；

　　方法二：

　　浏览器离开页面时弹出窗口；

　　方法三：

　　用一个连接调用：

　　<a href="#" onclick="openwin()">打开一个窗口</a>

　　注意：使用的“#”是虚连接。

　　方法四：

　　用一个按钮调用：

　　如何实现在不使用window.showModalDialog 的情况下用 window.open方式向父窗口返回值。

　　例如：页面AAA.htm 用 window.open方式弹出页面 BBB.htm 。

　　在页面BBB.htm上选择一个值，确定关闭窗口后将选择的这个值返回到父窗口AAA.htm。

　　AAA.htm得到返回的值后，给本页面上的文本框赋值。

　　BBB.htm页面中加入下面代码：

　　window.opener.document.getElementById("theTextAreaId").value = document.getElemnetById("theSelectId").value ;

　　window.opener 的用法

　　window.opener 返回的是创建当前窗口的那个父窗口的引用，比如点击了a.htm上的一个链接而打开了b.htm，然后我们打算在b.htm上输入一个值然后赋予a.htm上的一个id为“name”的textbox中，就可以写为：

　　window.opener.document.getElementById("name").value = "输入的数据";

　　对于javascript中的window.opener没有很好的理解。

　　为什么框架中不能使用，弹出窗口的父窗口不能在框架里面的某个页面呢？那怎样通过弹出窗口操作框架中的父窗口呢？

　　opener.parent.frames['frameName'].document.all.input1.value

　　即opener这个对象为前一个窗口，可以使用window.opener.document...调用document的相关方法，例如下面的例子，插入一些table行到前一个窗口：

　　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) 评论 (0) 分类: JavaScript 2008-02-27

　　缩略显示confirm用法和例子

　　一般用于弹出对话框（确定／否）

　　确定：就执行其嵌套的内容；否：则反之

　　//验证时间格式 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('真的要删除吗？删除后将无法恢复！')){

　　return;

　　}

　　//验证时间格式 YYYY-MM-DD

　　var startDate=document.getElementById("startDate").value;

　　var endDate=document.getElementById("endDate").value;

　　if(!isDate(startDate)){

　　alert(startDate+"请输入正确的开始日期格式!如:(YYYY-MM-DD)2008-01-01");

　　return document.getElementById("startDate").focus();

　　}

　　if(!isDate(endDate)){

　　alert("请输入正确的结束日期格式!如:(YYYY-MM-DD)2008-01-01");

　　return document.getElementById("endDate").focus();

　　}

　　if(startDate==""){

　　alert("请输入开始日期");

　　return document.getElementById("startDate").focus();

　　}

　　if(endDate==""){

　　alert("请输入结束日期");

　　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("结束日期必须大于开始日期");

　　return document.getElementById("endDate").focus();

　　}

　　</script>

　　<html>

　　<head>

　　table{color: #000000; font-family: 宋体; font-size: 12px; height:12 }

　　t1{color:#008000;align:center}

　　</style>

　　</head>

　　<tr>

　　<tr>

　　</tr>

　　</table>

　　</td>

　　</tr>

　　<tr>

　　<tr>

　　</select></td>

　　<font color="#008000">Logo行宽</font></td>

　　</select></td>

　　</td>

　　</tr>

　　</table>

　　</td>

　　</tr>

　　<tr>

　　<marquee behavior="slide" style="color: #808080">::日期格式为年-月-日,直接填入图片和点击路径全名时应仔细查对是否正确::</marquee></td>

　　</tr>

　　</table>

　　</div>

　　</body>

　　</html>

　　可以批量删除表格记录行，通过checkbox选择删除的行；可以批量增加记录行，通过输入框指定行数。

　　<html>

　　<head>

　　<title>The page of append rows to Table</title>

　　// 新增行

　　function addRow(){

　　var textNum = document.getElementById("rownum");

　　// 得到新增行记录的行数

　　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++){

　　// 得到表格对象

　　var tableObj = document.getElementById("mainTb");

　　// 得到tbody对象

　　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节点下增加td节点

　　newRowObj.appendChild(newCheckBox);

　　newRowObj.appendChild(newtext1);

　　newRowObj.appendChild(newtext2);

　　newRowObj.appendChild(newtext3);

　　// tbody节点下增加tr节点

　　tableBodyObj.appendChild(newRowObj);

　　}

　　// 新增行数选择框检查输入必须是数字

　　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 对象

　　var checkbox = document.getElementsByName("checkbox");

　　//var checkboxlen = document.all.checkbox.length;

　　// 得到所有提交的checkbox个数

　　var checkboxlen = checkbox.length;

　　var ischecked;

　　// 得到删除按钮对象

　　var delbutton = document.getElementById("delete");

　　for (var i=0; i < checkboxlen; i++){

　　// 得到表格行数

　　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;

　　// 如果当前的checkbox选中：删除当前节点，由于删除节点后，下面的节点上移，游标（记录行指针）也应该上移

　　if (ischecked)

　　{

　　// document.all("mainTb").deleteRow(i);

　　document.getElementById("mainTb").deleteRow(i);

　　// 游标（记录行指针）上移

　　i--;

　　}

　　// 重新统计checkbox个数

　　checkboxlen = checkbox.length;

　　}

　　// 删除操作后按钮状态是不可用

　　delbutton.disabled = true;

　　}

　　// checkbox按钮单击事件处理函数：是否至少选中一行记录，是可以删除操作；如果没有选择，删除按钮不可用

　　function checkBoxSel(){

　　// 得到删除按钮对象

　　var delbutton = document.getElementById("delete");

　　if(checkselect()){

　　delbutton.disabled = false;

　　}else{

　　delbutton.disabled = true;

　　}

　　function checkselect(){

　　// 得到所有 checkbox 对象

　　var checkbox = document.getElementsByName("checkbox");

　　// 得到所有提交的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;

　　}

　　// 页面加载body内容时执行

　　function loadpage(){

　　var delbutton = document.getElementById("delete");

　　var rownum = document.getElementById("rownum");

　　// 初始“删除”按钮不可用

　　delbutton.disabled = true;

　　// 初始行数输入框内容为空

　　rownum.value = "";

　　}

　　</script>

　　动态添加、删除行，分别通过insertRow，deleteRow方法实现，显示行号，通过rowIndex属性获得，基本可以动态实现相关功能。

　　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();

　　//设置列内容和属性

　　newTd0.innerHTML = '<input type=checkbox id="box' + lineNo + '" onClick="GetRow()">';

　　// 测试动态改变innerHTML中的checkbox的id

　　alert(_("box" + lineNo).id);

　　newTd1.innerText= '新增加行' + lineNo;

　　lineNo++;

　　}

　　function DelRow(iIndex){

　　//删除一行

　　if(iIndex==-99999){

　　alert("系统提示：没有选中行号!");

　　}else{

　　iIndex = cGetRow;

　　_("tab1").deleteRow(iIndex);

　　}

　　function GetRow(){

　　//获得行索引

　　//两个parentElement分别是TD和TR哟，rowIndex是TR的属性

　　//this.parentElement.parentElement.rowIndex

　　cGetRow=window.event.srcElement.parentElement.parentElement.rowIndex;

　　}

　　function ShowRow(){

　　//显示行号

　　alert(cGetRow);

　　//alert(document.getElementsByTagName("tr").length);

　　}

　　</script>

　　</tr>

　　</tr>

　　</tr>

　　</table>

　　</tr>

　　</table>

　　<input type="submit" name="Submit" value="ShowRow" onclick="javascript:ShowRow();"> 表格动态增加行

教程首页更多教程