JavaScript—window对象使用示例

 window对象是JavaScript浏览器对象模型中的顶层对象,其包含多个常用方法和属性,下面为大家介绍下window对象的使用

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> 

时间: 2024-08-03 01:19:54

JavaScript—window对象使用示例的相关文章

JavaScript—window对象使用示例_基础知识

window对象是JavaScript浏览器对象模型中的顶层对象,包含多个常用方法和属性: 1 打开新窗口 复制代码 代码如下: window.open(pageURL,name,parameters) 其中: pageURL为子窗口路径 name为子窗口句柄 parameters为窗口参数(各参数用逗号分隔) 如: 复制代码 代码如下: window.open("http://www.cnblogs.com/zhouhb/","open",'height=100,

javascript window对象属性整理_基础知识

window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval moveBy moveTo resizeBy resizeTo scrollBy scrollTo find back forward home stop print blur focus captureEvent enableExternalCapture disableExternalCapture

javascript Window 对象详解介绍

Window 对象 Window 对象表示浏览器中打开的窗口,如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象. Window 对象集合 frames[] 返回窗口中所有命名的框架,该集合是 Window 对象的数组,每个 Window 对象在窗口中含有一个框架或 <iframe> ,属性 frames.length 存放数组 frames[] 中含有的元素个数,注意,frames[]

Javascript window对象详解_基础知识

首先看我们的源代码. 复制代码 代码如下: <!DOCTYPE html>  <html>      <head>          <meta charset="utf-8" />          <title>深入理解Javascript</title>          <script type="text/javascript" charset="utf-8"

Javascript:window对象的方法

javascript|window|对象 open(URL,WindowName,parameterList):open方法创建一个新的浏览器窗口,并在新窗口中载入一个指定的URL地址. close():close方法关闭一个浏览器窗口. alert(text):弹出一个信息框. confirm(text):弹出一个确认框. prompt(text,Defaulttext):弹出一个提示框. setTimeout(expression,time):定时设置,在一定时间后自动执行expressio

JavaScript的document和window对象详解

javascript|window|对象|详解 [document对象] 该对象是window和frames对象的一个属性,是显示于窗口或框架内的一个文档. 属性 alinkColor 活动链接的颜色(ALINK) anchor 一个HTMI锚点,使用<A NAME=>标记创建(该属性本身也是一个对象) anchors array 列出文档锚点对象的数组(<A NAME=>)(该属性本身也是一个对象) bgColor 文档的背景颜色(BGCOLOR) cookie 存储于cooki

javascript Window及document对象详细整理_基础知识

一.Window对象 -------------------------------------------------- ------------------- 对象属性 window //窗户自身 window.self //引用本窗户window=window.self window.name //为窗户命名 window.defaultStatus //设定窗户状态栏信息 window.location //URL地址,配备布置这个属性可以打开新的页面 -----------------

Javascript之BOM(window对象)详解_基础知识

ECMAScript是JavaScript的核心,但在web使用JavaScript,那么BOM(浏览器对象模型)才是真正的核心. BOM的核心对象是window,它表示浏览器的一个实例. 在浏览器中,window对象既是JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象.也就是说,在网页中定义的任何一个变量.对象和函数以window作为其Global对象. 1.全局作用域 既然window对象扮演着Global对象,那么所有在全局作用域中声明的对象.变

javascript入门之window对象【新手必看】_javascript技巧

window :window对象是BOM中所有对象的核心,除了是BOM中所有对象的父对象外,还包含一些窗口控制函数. 1.全局的window对象 JavaScript中的任何一个全局函数或变量都是window的属性. <script type="text/javascript"> var name="撼地神牛"; document.write(window.name); </script> 2.window与self对象 self对象与win