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 相关文章推荐
实现超用户体验 table排序javascript实现代码
Jun 22 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
Sep 01 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
js对文章内容进行分页示例代码
Mar 05 Javascript
JavaScript中调用函数的4种方式代码实例
Jul 08 Javascript
AngularJS中实现用户访问的身份认证和表单验证功能
Apr 21 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
使用vue.js写一个tab选项卡效果
Mar 25 Javascript
浅析Angular 实现一个repeat指令的方法
Jul 21 Javascript
弱类型语言javascript中 a,b 的运算实例小结
Aug 07 Javascript
小程序实现按下录音松开识别语音
Nov 22 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
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
PHP编程中字符串处理的5个技巧小结
2007/11/13 PHP
PHP游戏编程25个脚本代码
2011/02/08 PHP
PHP 快速排序算法详解
2014/11/10 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
json的前台操作和后台操作实现代码
2012/01/20 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
JQuery结合CSS操作打印样式的方法
2013/12/24 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
2015/01/09 Javascript
JQuery中属性过滤选择器用法实例分析
2015/05/18 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
手机注册发送验证码倒计时的简单实例
2017/11/15 Javascript
完美解决手机浏览器顶部下拉出现网页源或刷新的问题
2017/11/30 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
2020/02/07 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
python 查找字符串是否存在实例详解
2017/01/20 Python
解决Python网页爬虫之中文乱码问题
2018/05/11 Python
详解python使用pip安装第三方库(工具包)速度慢、超时、失败的解决方案
2018/12/02 Python
python实现图片九宫格分割
2021/03/07 Python
Python全局变量与global关键字常见错误解决方案
2020/10/05 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
暑期实习鉴定
2013/12/16 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
艺术设计专业求职自荐信
2014/05/19 职场文书
中国梦口号
2014/06/13 职场文书
十二生肖观后感
2015/06/12 职场文书
anaconda python3.8安装后降级
2021/06/11 Python
JavaScript实现简单拖拽效果
2021/09/15 Javascript
MySQL窗口函数的具体使用
2021/11/17 MySQL
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技