首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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 window.opener的用法分析

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js操纵跨frame的三级联动select下拉选项实例介绍
May 19 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
公共js在页面底部加载的注意事项介绍
Jul 18 Javascript
javascript自动给文本url地址增加链接的方法分享
Jan 20 Javascript
alert和confirm功能介绍
May 21 Javascript
最精简的JavaScript实现鼠标拖动效果的方法
May 11 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
微信小程序 云开发模糊查询实现解析
Sep 02 Javascript
解决layer.confirm快速点击会重复触发事件的问题
Sep 23 Javascript
js实现小星星游戏
Mar 23 Javascript
JS实现可控制的进度条
Mar 25 Javascript
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
MX500(1) YB400(2) S2000(3) 直流胆(1) YB217(1) PL660(1) 台湾(1) 南麂列岛(1) 森海(1) YB235(1)
You might like
PHP EOT定界符的使用详解
2008/09/30 PHP
php 服务器调试 Zend Debugger 的安装教程
2009/09/25 PHP
thinkphp实现把数据库中的列的值存到下拉框中的方法
2017/01/20 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
JS处理VBArray的函数使用说明
2008/05/11 Javascript
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
jQuery简易图片放大特效示例代码
2014/06/09 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
nodejs中的fiber（纤程）库详解
2015/03/24 NodeJs
不得不分享的JavaScript常用方法函数集（上）
2015/12/23 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
jQuery复合事件结合toggle()方法的用法示例
2017/06/10 jQuery
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
2018/04/18 Javascript
vue.js实现的绑定class操作示例
2018/07/06 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
2019/05/22 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
jQuery 实现DOM元素拖拽交换位置的实例代码
2020/07/14 jQuery
js实现购物车商品数量加减
2020/09/21 Javascript
Python中的is和id用法分析
2015/01/26 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
阳光体育：Sunny Sports（购买露营和远足设备）
2018/08/07 全球购物
运动会表扬稿范文
2015/05/05 职场文书
2016春季运动会前导词
2015/11/25 职场文书
Python趣味挑战之实现简易版音乐播放器
2021/05/28 Python
Python中OpenCV实现查找轮廓的实例
2021/06/08 Python
Golang生成Excel文档的方法步骤
2021/06/09 Golang
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python