首页
所有分类
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 相关文章推荐
JavaScript打字小游戏代码
Dec 26 Javascript
仿新浪微博登陆邮箱提示效果的js代码
Aug 02 Javascript
js获取系统的根路径实现介绍
Sep 08 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
jQuery中prop()方法用法实例
Jan 05 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
Aug 21 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
浅谈Fetch 数据交互方式
Dec 20 Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 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
InputStream(1) Vue3(1) HDR(1) axios(1) 连接器(1) 曝光融合(1) 高动态范围(1) kafka(2) 数据加密(1) shell脚本(1)
You might like
php面向对象全攻略 （六）__set() __get() __isset() __unset()的用法
2009/09/30 PHP
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
PHP中数据库单例模式的实现代码分享
2014/08/21 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
PHP查询快递信息的方法
2015/03/07 PHP
PHP session 会话处理函数
2016/06/06 PHP
js Html结构转字符串形式显示代码
2011/11/15 Javascript
js jquery数组介绍
2012/07/15 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
javascript事件的绑定基础实例讲解（34）
2017/02/14 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
2018/08/17 Javascript
vue中过滤器filter的讲解
2019/01/21 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
Python中super的用法实例
2015/05/28 Python
深入解析Python中函数的参数与作用域
2016/03/20 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
python交易记录链的实现过程详解
2019/07/03 Python
Python的numpy库下的几个小函数的用法(小结)
2019/07/12 Python
python 项目目录结构设置
2020/02/14 Python
使用Keras建立模型并训练等一系列操作方式
2020/07/02 Python
经验丰富程序员才知道的8种高级Python技巧
2020/07/27 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
Omio美国：全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
英国最大的汽车配件在线商店：Euro Car Parts
2019/09/30 全球购物
心理健康教育心得体会
2013/12/29 职场文书
学年自我鉴定
2014/01/16 职场文书
战友聚会邀请函
2014/01/18 职场文书
电台编导求职信
2014/05/06 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
历史名人教你十五个读书方法，赶快Get起来！
2019/07/18 职场文书
解析laravel使用workerman用户交互、服务器交互
2021/04/28 PHP
Python django中如何使用restful框架
2021/06/23 Python
SQL Server使用PIVOT与unPIVOT实现行列转换
2022/05/25 SQL Server