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 相关文章推荐
jQuery中调用WebService方法小结
Mar 28 Javascript
jquery中eq和get的区别与使用方法
Apr 14 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
认识jQuery的Promise的具体使用方法
Oct 10 jQuery
关于JSON解析的实现过程解析
Oct 08 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 Javascript
vue3.0搭配.net core实现文件上传组件
Oct 29 Javascript
javascript拖曳互换div的位置实现示例
Jun 28 Javascript
使用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的access操作类
2008/04/09 PHP
PHP 彩色文字实现代码
2009/06/29 PHP
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
php生成动态验证码gif图片
2015/10/19 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
用Javascript实现UTF8编码转换成gb2312编码
2006/12/22 Javascript
获取body标签的两种方法
2011/10/13 Javascript
在服务端(Page.Write)调用自定义的JS方法详解
2013/08/09 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
Js 获取、判断浏览器版本信息的简单方法
2016/08/08 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
js实现登录验证码
2016/12/22 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
简述vue中的config配置
2018/01/23 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
vue-better-scroll 的使用实例代码详解
2018/12/03 Javascript
JS数据类型STRING使用实例解析
2019/12/18 Javascript
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
利用Python暴力破解zip文件口令的方法详解
2017/12/21 Python
Python 实现字符串中指定位置插入一个字符
2018/05/02 Python
美国最大网上鞋店:Zappos
2016/07/25 全球购物
夏威夷航空官网:Hawaiian Airlines
2016/09/11 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
个性与发展自我评价
2014/02/11 职场文书
《那片绿绿的爬山虎》教学反思
2014/02/27 职场文书
员工工作表现评语
2014/04/26 职场文书
开工典礼策划方案
2014/05/23 职场文书
人事任命通知
2015/04/20 职场文书
python图像处理 PIL Image操作实例
2022/04/09 Python