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 相关文章推荐
node.js中的path.basename方法使用说明
Dec 09 Javascript
简介JavaScript中的italics()方法的使用
Jun 08 Javascript
javascript图片预加载实例分析
Jul 16 Javascript
详解JavaScript的表达式与运算符
Nov 30 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 Javascript
详解Vue如何支持JSX语法
Nov 10 Javascript
详解Vue数据驱动原理
Nov 17 Javascript
vue-cropper插件实现图片截取上传组件封装
May 27 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
thinkPHP中验证码的简单使用方法
2015/12/26 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
js中的数组Array定义与sort方法使用示例
2013/08/29 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
Javascript 运动中Offset的bug解决方案
2014/12/24 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
探讨JavaScript中的Rest参数和参数默认值
2015/07/29 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
50 个 jQuery 插件可将你的网站带到另外一个高度
2016/04/26 Javascript
浅析Nodejs npm常用命令
2016/06/14 NodeJs
JSP防止网页刷新重复提交数据的几种方法
2016/11/19 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
使用travis-ci如何持续部署node.js应用详解
2017/07/30 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
JavaScript制作3D旋转相册
2020/08/02 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
Python使用matplotlib实现在坐标系中画一个矩形的方法
2015/05/20 Python
Python实现判断字符串中包含某个字符的判断函数示例
2018/01/08 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
python中的json总结
2018/10/11 Python
Django中celery执行任务结果的保存方法
2019/07/12 Python
python numpy中cumsum的用法详解
2019/10/17 Python
公司成立感言
2014/01/11 职场文书
求职简历自我评价怎么写
2015/03/10 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书