JavaScript—window对象使用示例


Posted in Javascript onDecember 09, 2013

window对象是JavaScript浏览器对象模型中的顶层对象,包含多个常用方法和属性:

1 打开新窗口

window.open(pageURL,name,parameters)

其中:

pageURL为子窗口路径

name为子窗口句柄

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

如:

window.open("http://www.cnblogs.com/zhouhb/","open",'height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');

2 打开模式窗口
window.showModalDialog("http://www.cnblogs.com/zhouhb/","open","toolbars=0;width=200;height=200");

3 关闭窗口,不弹出提示框

如果网页不是通过脚本程序打开的(window.open()),调用window.close()脚本关闭窗口前,必须先将window.opener对象置为null,否则浏览器(IE7、IE8)会弹出一个确定关闭的对话框。

<script language="javaScript"> 
function closeWindow() 
{ 
 window.opener = null; 
 window.open('', '_self', ''); 
 window.close(); 
} 
</script> 
<input type='button' value='关闭窗口' onClick="closeWindow()"> 
或 
<input type="button" value="关闭窗口" onClick="window.opener = null; 
window.open('', '_self', '');window.close()">

对于关闭框架窗口
<script language="javaScript"> 
function closeWindow() 
{ 
window.opener = null; 
window.open('', '_top', ''); 
window.parent.close(); 
} 
</script>

4 location对象使用
window.location.reload();//刷新当前页 
window.location.href="http://www.cnblogs.com/zhouhb/"; //载入其他页面

5 history对象使用
window.history.go(1); //前进 
window.history.go(-1); //后退

6 子窗体向父窗体传值

6.1 简单方法

(1)在父窗体中打开子窗体

var str=window.showModalDialog("s.html"); 
if(str!=null) 
{ 
var v=document.getElementById("v"); 
v.value+=str; 
}

(2)子窗体代码
var v=document.getElementById("v"); 
window.parent.returnValue=v.value; window.close();

另外,对于showModalDialog打开的窗口,也可以通过dialogArguments传值:

父窗口代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script type="text/javascript"> 
function opendialog() 
{ 
window.showModalDialog("child.html",window,"win","resable=false");//这里用window对象作为参数传递 
} 
</script> 
</head> <body> 
<form> 
<input type="text" id="name" /> 
<input type="button" id="open" value="open" onclick="opendialog()"/> 
</form> 
</body> 
</html>

子窗口代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script type="text/javascript"> 
function updateParent() 
{ 
var pwin=window.dialogArguments;//子窗口获取传递的参数 
if(pwin!=undefined) 
{ 
pwin.document.getElementById("name").value=document.getElementById("name").value; 
} 
} 
</script> 
</head> <body> 
<form> 
<input type="text" id="name" /> 
<input type="button" id="update" value="更新父窗口" onclick="updateParent()"/> 
</form> 
</body> 
</html>

对于showModalDialog打开的窗口,也可以通过window.returnValue传值:

主窗口:

<SCRIPT type="text/javascript"> 
function openWindow(){ 
var bankCard=window.showModalDialog("counter.html","","dialogWidth=400px;dialogHeight=200px"); 
alert("您的银行卡密码是"+bankCard+"\n"); 
} 
</SCRIPT>

(2)打开的窗口
<HEAD> 
<META http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<TITLE>窗口练习</TITLE> 
<SCRIPT type="text/javascript" language="javascript"> 
function closeWindow(){ 
window.returnValue=document.myform.cardPass.value; 
window.close(); 
} 
</SCRIPT> 
</HEAD> 
<BODY> 
<FORM name="myform" action="" method="post"> 
账户信息:<BR> 
请妥善保存你的账户信息,以免发生损失<BR> 
帐号:<INPUT name="cardNum" type="text" size="40"><BR> 
密码:<INPUT name="cardPass" type="password" size="45"><BR> 
<INPUT type="button" name="btn" value="确认" onClick="closeWindow()"> 
</FORM> 
</BODY>

6.2 更加详细的介绍

众所周知window.open() 函数可以用来打开一个新窗口,那么如何在子窗体中向父窗体传值呢,其实通过window.opener即可获取父窗体的引用。
如我们新建窗体FatherPage.htm:

<script type="text/javascript"> 
function OpenChildWindow() 
{ 
window.open('ChildPage.htm'); 
} 
</script> 
<input type="text" id="txtInput" /> 
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />

然后在ChildPage.htm中即可通过window.opener来访问父窗体中的元素:
<script type="text/javascript"> 
function SetValue() 
{ 
window.opener.document.getElementById('txtInput').value 
=document.getElementById('txtInput').value; 
window.close(); 
} 
</script> 
<input type="text" id="txtInput" /> 
<input type="button" value="SetFather" onclick="SetValue()" />

其实在打开子窗体的同时,我们也可以对子窗体的元素进行赋值,因为window.open函数同样会返回一个子窗体的引用,因此FatherPage.htm可以修改为:
<script type="text/javascript"> 
function OpenChildWindow() 
{ 
var child = window.open('ChildPage.htm'); 
child.document.getElementById('txtInput').value 
=document.getElementById('txtInput').value; 
} 
</script> 
<input type="text" id="txtInput" /> 
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />

通过判断子窗体的引用是否为空,我们还可以控制使其只能打开一个子窗体:
<script type="text/javascript"> 
var child 
function OpenChildWindow() 
{ 
if(!child) 
child = window.open('ChildPage.htm'); 
child.document.getElementById('txtInput').value 
=document.getElementById('txtInput').value; 
} 
</script> 
<input type="text" id="txtInput" /> 
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />

光这样还不够,当关闭子窗体时还必须对父窗体的child变量进行清空,否则打开子窗体后再关闭就无法再重新打开了:
<body onunload="Unload()"> 
<script type="text/javascript"> 
function SetValue() 
{ 
window.opener.document.getElementById('txtInput').value 
=document.getElementById('txtInput').value; 
window.close(); 
} 
function Unload() 
{ 
window.opener.child=null; 
} 
</script> 
<input type="text" id="txtInput" /> 
<input type="button" value="SetFather" onclick="SetValue()" /> 
</body>
Javascript 相关文章推荐
JavaScript脚本性能优化注意事项
Nov 18 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
JavaScript cookie的设置获取删除详解
Feb 11 Javascript
2014年最火的Node.JS后端框架推荐
Oct 27 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
Sep 23 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
javascript实现拖拽碰撞检测
Mar 12 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 #Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 #Javascript
深入理解JavaScript中的传值与传引用
Dec 09 #Javascript
js Array操作的最简短最容易理解方法
Dec 09 #Javascript
javascript放大镜效果的简单实现
Dec 09 #Javascript
javascript贪吃蛇完整版(源码)
Dec 09 #Javascript
关于js内存泄露的一个好例子
Dec 09 #Javascript
You might like
PHP insert语法详解
2008/06/07 PHP
用PHP为SHOPEX增加日志功能代码
2010/07/02 PHP
PHP的MVC模式实现原理分析(一相简单的MVC框架范例)
2014/04/29 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
php实现购物车功能(上)
2020/07/23 PHP
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
使用CSS样式position:fixed水平滚动的方法
2014/02/19 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
2018/11/22 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
vue-router的hooks用法详解
2020/06/08 Javascript
[55:03]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.20
2020/11/20 DOTA
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
python环境路径配置以及命令行运行脚本
2019/04/02 Python
PHP基于phpqrcode类库生成二维码过程解析
2020/05/28 Python
Python如何读写CSV文件
2020/08/13 Python
世界上最大的街头服饰网站:Karmaloop
2017/02/04 全球购物
类的核心特性有哪些
2014/01/01 面试题
实习护理工作自我评价
2013/09/25 职场文书
会计电算化专业应届大学生求职信
2013/10/22 职场文书
公司中秋节活动方案
2014/02/12 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
幼师求职信
2014/06/23 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
八年级英语教学反思
2016/02/15 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
导游词之杭州西湖
2019/09/19 职场文书
python tkinter模块的简单使用
2021/04/07 Python
python实现简单倒计时功能
2021/04/21 Python
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
python单向链表实例详解
2022/05/25 Python