javascript window.opener的用法分析


Posted in Javascript onApril 07, 2010

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 为窗口参数(各参数用逗号分隔)

示例:

<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>
脚本运行后,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>
<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()">
任意的页面内容...
</body>
</html>
这里定义了一个函数openwin(),函数内容就是打开一个窗口。怎么调用呢?
方法一:
<body onload="openwin()">
浏览器读页面时弹出窗口;
方法二:
<body onunload="openwin()">
浏览器离开页面时弹出窗口;
方法三:
用一个连接调用:
<a href="#" onclick="openwin()">打开一个窗口</a>
注意:使用的“#”是虚连接。
方法四:
用一个按钮调用:
<input type="button" onclick="openwin()" value="打开窗口">
如何实现在不使用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用法和例子
一般用于弹出对话框(确定/否)
确定:就执行其嵌套的内容;否:则反之

<script language="javascript">
//验证时间格式 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>
<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">结束日期</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">当前状态</font></td>
<td width="18%" align="center" height="25">
<select size="1" name="display">
<option value="0">无效</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="关闭" 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">::日期格式为年-月-日,直接填入图片和点击路径全名时应仔细查对是否正确::</marquee></td>
</tr>
</table>
</div>
</body>
</html>
可以批量删除表格记录行,通过checkbox选择删除的行;可以批量增加记录行,通过输入框指定行数。

<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");
// 得到新增行记录的行数
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属性获得,基本可以动态实现相关功能。

<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();
//设置列内容和属性
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>

<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">统计</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();"> 表格动态增加行

Javascript 相关文章推荐
9个JavaScript评级/投票插件
Jan 18 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
jquery的父子兄弟节点查找示例代码
Mar 03 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
May 02 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
scrapyd schedule.json setting 传入多个值问题
Aug 07 Javascript
JavaScript定时器常见用法实例分析
Nov 15 Javascript
vue绑定class的三种方法
Dec 24 Vue.js
JS的反射问题
Apr 07 #Javascript
Extjs在exlipse中设置自动提示的方法
Apr 07 #Javascript
JavaScript Distilled 基础知识与函数
Apr 07 #Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 #Javascript
javascript在事件监听方面的兼容性小结
Apr 07 #Javascript
javascript 程序库的比较(一)之DOM功能
Apr 07 #Javascript
JS 文件大小判断的实现代码
Apr 07 #Javascript
You might like
DW中链接mysql数据库时,建立字符集中文出现乱码的解决方法
2010/03/27 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
php生成图片验证码的实例讲解
2015/08/03 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
JQuery 获得绝对,相对位置的坐标方法
2010/02/09 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
60个很实用的jQuery代码开发技巧收集
2014/12/15 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
javascript数组去重小结
2016/03/07 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
微信小程序用canvas画图并分享
2020/03/09 Javascript
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
Python操作CouchDB数据库简单示例
2015/03/10 Python
利用Django提供的ModelForm增删改数据的方法
2019/01/06 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
pandas数据处理进阶详解
2019/10/11 Python
python 动态绘制爱心的示例
2020/09/27 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
英国网上购买门:Direct Doors
2018/06/07 全球购物
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
全球性的在线商店:Vogca
2019/05/10 全球购物
机电工程专业应届生求职信
2013/10/03 职场文书
父亲生日宴会答谢词
2014/01/10 职场文书
求职简历的自我评价
2014/01/31 职场文书
安全生产大检查方案
2014/05/07 职场文书
环卫工人节活动总结
2014/08/29 职场文书
计划生育证明格式及范本
2014/10/09 职场文书
2014年医务科工作总结
2014/12/18 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
2016年12月份红领巾广播稿
2015/12/21 职场文书
图片批量处理 - 尺寸、格式、水印等
2022/03/07 杂记