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和DOM Interfaces来处理HTML
Oct 09 Javascript
Jquery写一个鼠标拖动效果实现原理与代码
Dec 24 Javascript
JS中令人发指的valueOf方法介绍
Feb 22 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
Aug 22 Javascript
JS鼠标拖拽实例分析
Nov 23 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
vue+php实现的微博留言功能示例
Mar 16 Javascript
layui table 列宽百分比显示的实现方法
Sep 28 Javascript
package.json中homepage属性的作用详解
Mar 11 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
PHP中的CMS的涵义
2007/03/11 PHP
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
php格式化日期实例分析
2014/11/12 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
ExtJS 入门
2010/10/29 Javascript
JavaScript获取网页中第一个图片id的方法
2015/04/03 Javascript
详解JavaScript ES6中的模板字符串
2015/07/28 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
2016/06/01 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
JQuery Ajax执行跨域请求数据的解决方案
2018/12/10 jQuery
Vue路由守卫及页面登录权限控制的设置方法(两种)
2020/03/31 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
python开启多个子进程并行运行的方法
2015/04/18 Python
Python可变参数函数用法实例
2015/07/07 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
解决Python的str强转int时遇到的问题
2018/04/09 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
ActiveMQ:使用Python访问ActiveMQ的方法
2019/01/30 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
仓库管理制度
2014/01/21 职场文书
留学推荐信中文范文三篇
2014/01/25 职场文书
体育节口号
2014/06/19 职场文书
感恩节寄语2015
2015/03/24 职场文书
小学教学工作总结2015
2015/05/13 职场文书
优质服务标语口号
2015/12/26 职场文书
写好求职信的技巧解密
2019/05/14 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers