Widnow对象
简述
window 是 JavaScript 全局顶级对象 ，是浏览器环境的根对象；
所有全局变量、全局函数、DOM、BOM 都挂载在 window 下。
网页里默认省略 window.，直接写即可（如 alert() 等价于 window.alert()）。
核心作业
浏览器窗口 / 标签页的代表对象
BOM（浏览器对象模型） 顶层入口
所有全局内容的宿主：
window.document： DOM 文档对象window.location： 地址栏、跳转window.history： 浏览历史window.navigator： 浏览器信息window.screen： 屏幕信息
BOM层级图
graph LR
%% 定义节点 & 苹果极简配色
A[Window 顶层窗口]:::winRoot
B[History 浏览历史]:::winLv2
C[Document 文档DOM]:::winLv2
D[Location 地址栏]:::winLv2
E[Screen 屏幕信息]:::winLv2
F[Navigator 浏览器信息]:::winLv2
G[Frames 框架集合]:::winLv2
H[Top 顶层窗口]:::winLv2
I[Self 当前窗口]:::winLv2
J[Opener 打开窗口]:::winLv2
K[Console 控制台]:::winLv2
L[LocalStorage 本地存储]:::winLv2
M[SessionStorage 会话存储]:::winLv2
N[IndexedDB 索引数据库]:::winLv2
O[Performance 性能API]:::winLv2
P[Crypto 加密API]:::winLv2
Q[Link/超链接]:::domLv3
R[Form 表单]:::domLv3
S[Anchor 锚点]:::domLv3
T[Text 文本框]:::domLv4
U[Textarea 多行文本]:::domLv4
V[Radio 单选框]:::domLv4
W[Checkbox 复选框]:::domLv4
X[Button 按钮]:::domLv4
Y[Option 下拉选项]:::domLv4
Z[Reset 重置按钮]:::domLv4
AA[Submit 提交按钮]:::domLv4
AB[Select 下拉菜单]:::domLv4
%% 关联连线
A --> B
A --> C
A --> D
A --> E
A --> F
A --> G
A --> H
A --> I
A --> J
A --> K
A --> L
A --> M
A --> N
A --> O
A --> P
C --> Q
C --> R
C --> S
Q --> T
Q --> U
Q --> V
Q --> W
Q --> X
Q --> Y
Q --> Z
Q --> AA
Q --> AB
%% 苹果淡雅风格配色
classDef winRoot fill:#f5f5f7,stroke:#d2d2d7,color:#1d1d1f
classDef winLv2 fill:#e8edf2,stroke:#b7c4d1,color:#1d1d1f
classDef domLv3 fill:#fef2f2,stroke:#fccaca,color:#1d1d1f
classDef domLv4 fill:#f2f7f5,stroke:#c6e0d5,color:#1d1d1f
常见属性及方法
名称
说明
status
指定浏览器状态栏中显示的临时消息
screen
有关客户端的屏幕和显示性能的信息。
history
有关客户访问过的URL的信息。
location
有关当前 URL 的信息。
document
表示浏览器窗口中的HTML文档
alert ("提示信息")
显示一个带有提示信息和确定按钮的对话框
confirm("提示信息“)
显示一个带有提示信息、确定和取消按钮的对话框
open ("url","name")
打开具有指定名称的新窗口，并加载给定 URL 所指定的文档；如果没有提供 URL，则打开一个空白文档
close ( )
关闭当前窗口
showModalDialog( )
在一个模式窗口中显示指定的HTML文档
setTimeout("函数",毫秒数)
设置定时器：经过指定毫秒值后执行某个函数
onLoad
在窗口或框架完成文档加载时触发
window对象操作示例
动态打开窗口
< SCRIPT language = "javascript" >
function openwindow () {
//在窗口状态栏中设置文本
window . status = "系统当前状态：您正在注册用户......" ;
//获取窗口的高度
if ( window . screen . width > 1024 && window . screen . height > 768 )
//使用open方法打开新窗口
window . open ( "register.html" );
else
//弹出警告对话框
window . alert ( "请设置分辨率为1024x768，然后再打开" );
}
function closewindow () {
//弹出确认对话框
if ( window . confirm ( "您确认要退出系统吗？" ))
//关闭当前窗口
window . close ();
}
</ SCRIPT >
源代码
< HTML >
< HEAD >
< META http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< TITLE > window对象</ TITLE >
< SCRIPT language = "javascript" >
function openwindow () {
//在窗口状态栏中设置文本
window . status = "系统当前状态：您正在注册用户......" ;
//获取窗口的高度
if ( window . screen . width > 1024 && window . screen . height > 768 )
//使用open方法打开新窗口
window . open ( "register.html" );
else
//弹出警告对话框
window . alert ( "请设置分辨率为1024x768，然后再打开" );
}
function closewindow () {
//弹出确认对话框
if ( window . confirm ( "您确认要退出系统吗？" ))
//关闭当前窗口
window . close ();
}
</ SCRIPT >
</ HEAD >
< BODY bgcolor = "#CCCCCC" >
< TABLE border = "0" align = "center" bgcolor = "#FFFFFF" >
< TR >
< TD >< IMG src = "images/head.jpg" width = "761" height = "389" ></ TD >
</ TR >
< TR >
< TD >< IMG src = "images/foot.jpg" width = "502" height = "90" align = "top" >
<!-- 添加单击事件 -->
< INPUT type = "button" name = "regButton" value = " 用户注册 " onclick = "openwindow( )" >
< INPUT type = "button" name = "exitButton" value = " 退 出 " onclick = "closewindow( )" >
</ TD >
</ TR >
</ TABLE >
</ BODY >
</ HTML >
open函数
open函数
open("打开窗口的url"，"窗口名"，"窗口特征")
窗口的特征如下，可以任意组合：
height： 窗口高度；
width： 窗口宽度；
top： 窗口距离屏幕上方的象素值；
left：窗口距离屏幕左侧的象素值；
toolbar： 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable： 是否允许改变窗口大小，yes或1为允许
location： 是否显示地址栏，yes或1为允许
status：是否显示状态栏内的信息，yes或1为允许；
示例
< SCRIPT language = "javascript" >
function openwindow () {
window . status = "系统当前状态：您正在注册用户......" ;
if ( window . screen . width > 1024 && window . screen . height > 768 )
open ( "register.html" , "注册窗口" , "toolbars=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1" );
else
window . alert ( "请设置分辨率为1024x768，然后再打开" );
}
</ SCRIPT >
< INPUT type = "button" name = "regButton" value = " 用户注册 " onclick = "openwindow( )" >
源代码
js_window_open2.html < HTML >
< HEAD >
< META http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< TITLE > window对象</ TITLE >
< SCRIPT language = "javascript" >
function openwindow () {
window . status = "系统当前状态：您正在注册用户......" ;
if ( window . screen . width > 1024 && window . screen . height > 768 )
open ( "register.html" , "注册窗口" , "toolbars=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1" );
else
window . alert ( "请设置分辨率为1024x768，然后再打开" );
}
function closewindow () {
if ( window . confirm ( "您确认要退出系统吗？" ))
window . close ();
}
</ SCRIPT >
< STYLE type = "text/css" >
<! --
body {
background-color : #CCCCCC ;
}
-- >
</ STYLE >
</ HEAD >
< BODY >
< TABLE border = "0" align = "center" bgcolor = "#FFFFFF" >
< TR >
< TD >< IMG src = "images/head.jpg" width = "761" height = "389" ></ TD >
</ TR >
< TR >
< TD >< IMG src = "images/foot.jpg" width = "502" height = "90" align = "top" >
< INPUT type = "button" name = "regButton" value = " 用户注册 " onclick = "openwindow( )" >
< INPUT type = "button" name = "exitButton" value = " 退 出 " onclick = "closewindow( )" >
</ TD >
</ TR >
</ TABLE >
</ BODY >
</ HTML >
使用超链接调用方法来打开注册新窗口
< H3 >< A href = "javascript: openwindow( ) " > 用户注册 </ A ></ H3 >
源代码
< HTML >
< HEAD >
< META http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< TITLE > window对象</ TITLE >
< SCRIPT language = "javascript" >
function openwindow () {
window . status = "系统当前状态：您正在注册用户......" ;
if ( window . screen . width == 1024 && window . screen . height == 768 )
open ( "register.html" , "注册窗口" , "toolbars=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1" );
else
window . alert ( "请设置分辨率为1024x768，然后再打开" );
}
function closewindow () {
if ( window . confirm ( "您确认要退出系统吗？" ))
window . close ();
}
</ SCRIPT >
< STYLE type = "text/css" >
<! --
/*设置无下划线的超连接样式*/
A {
color : blue ;
text-decoration : none ;
}
A : hover {
/*鼠标在超链接上悬停时变为颜色*/
color : red ;
}
-- >
</ STYLE >
</ HEAD >
< BODY bgcolor = "#CCCCCC" >
< TABLE width = "100%" height = "100%" border = "0" >
< tr >
< td align = "center" valign = "middle" >
< TABLE border = "0" align = "center" bgcolor = "#FFFFFF" >
< TR >
< TD colspan = "3" >< IMG src = "images/head.jpg" width = "761" height = "389" ></ TD >
</ TR >
< TR >
< TD width = "502" >
< IMG src = "images/foot.jpg" width = "502" height = "90" align = "top" >
</ TD >
< TD width = "86" valign = "top" >
< H3 >< A href = "javascript: openwindow( ) " > 用户注册 </ A ></ H3 >
</ TD >
< TD width = "263" valign = "top" >
< H3 >< A href = "javascript: closewindow( ) " > 退 出</ A ></ H3 >
</ TD >
</ TR >
</ TABLE >
</ td >
</ tr >
</ TABLE >
</ BODY >
</ HTML >
onLoad事件
< BODY onLoad = "openwindow( )" >
< H2 > </ H2 >
</ BODY >
源代码
< HTML >
< HEAD >
< META http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< SCRIPT language = "JavaScript" >
function openwindow () {
open ( "adv.htm" , "这是一个广告" , "toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=700, height=250" );
}
</ SCRIPT >
< STYLE type = "text/css" >
<! --
body {
background-image : url ( images/index_image.jpg );
}
-- >
</ STYLE >
</ HEAD >
< BODY onLoad = "openwindow( )" >
< H2 > </ H2 >
</ BODY >
</ HTML >
模式窗口
< SCRIPT language = "javascript" >
function openwindow () {
window . status = "系统当前状态：您正在注册用户......" ;
if ( window . screen . width > 1024 && window . screen . height > 768 )
window . showModalDialog ( "register.html" , "注册窗口" , "toolbars=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1" );
else
window . alert ( "请设置分辨率为1024x768，然后再打开" );
}
function closewindow () {
if ( window . confirm ( "您确认要退出系统吗？" ))
window . close ();
}
</ SCRIPT >
源代码
js_window_open5.html < HTML >
< HEAD >
< META http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< TITLE > window对象</ TITLE >
< SCRIPT language = "javascript" >
function openwindow () {
window . status = "系统当前状态：您正在注册用户......" ;
if ( window . screen . width > 1024 && window . screen . height > 768 )
window . showModalDialog ( "register.html" , "注册窗口" , "toolbars=0, location=0, statusbars=0, menubars=0,width=700,height=550,scrollbars=1" );
else
window . alert ( "请设置分辨率为1024x768，然后再打开" );
}
function closewindow () {
if ( window . confirm ( "您确认要退出系统吗？" ))
window . close ();
}
</ SCRIPT >
< STYLE type = "text/css" >
<! --
/*设置无下划线的超连接样式*/
A {
color : blue ;
text-decoration : none ;
}
A : hover {
/*鼠标在超链接上悬停时变为颜色*/
color : red ;
}
-- >
</ STYLE >
</ HEAD >
< BODY bgcolor = "#CCCCCC" >
< TABLE border = "0" align = "center" bgcolor = "#FFFFFF" >
< TR >
< TD colspan = "3" >< IMG src = "images/head.jpg" width = "761" height = "389" ></ TD >
</ TR >
< TR >
< TD width = "502" >
< IMG src = "images/foot.jpg" width = "502" height = "90" align = "top" >
</ TD >
< TD width = "86" valign = "top" >
< H3 >< A href = "javascript: openwindow( ) " > 用户注册 </ A ></ H3 >
</ TD >
< TD width = "263" valign = "top" >
< H3 >< A href = "javascript: closewindow( ) " > 退 出</ A ></ H3 >
</ TD >
</ TR >
</ TABLE >
</ BODY >
</ HTML >
Date对象做时钟显示
Date 对象存储的日期为自 1970 年 1 月 1 日 00:00:00 以来的毫秒数
var 日期对象 = new Date ( 年 、 月 、 日等参数 )
例如：
var mydate = new Date ( "July 29, 2007,10:30:00" )
如果没有参数，表示当前日期和时间
例如：
Date成员方法
Date 方法的分组
方法分组
说 明
setXxx
这些方法用于设置时间和日期值
getXxx
这些方法用于获取时间和日期值
用作Date方法的参数的整数范围 ：
值
整 数
Seconds 和 minutes
0 至 59
Hours
0 至 23
Day
0 至 6（星期几）
Date
1 至 31（月份中的天数）
Months
0 至 11（一月至十二月）
示例：显示当前时间
页面
源代码
< HTML >
< HEAD >
< META http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< TITLE > date对象</ TITLE >
< SCRIPT language = "javaScript" >
function disptime () {
var now = new Date ();
var hour = now . getHours ();
if ( hour >= 0 && hour <= 12 )
document . write ( "<H2>上午好!</H2>" )
if ( hour > 12 && hour <= 18 )
document . write ( "<H2>下午好!</H2>" );
if ( hour > 18 && hour < 24 )
document . write ( "<H2>晚上好!</H2>" );
document . write ( "<H2>今天日期:" + now . getYear () + "年" + ( now . getMonth () + 1 ) + "月" + now . getDate () + "日</H2>" );
document . write ( "<H2>现在时间:" + now . getHours () + "点" + now . getMinutes () + "分</H2>" );
}
</ SCRIPT >
</ HEAD >
< BODY onload = "disptime( )" >
</ BODY >
</ HTML >
源代码
js_window_date.html < HTML >
< HEAD >
< META http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< TITLE > date对象</ TITLE >
< SCRIPT language = "javaScript" >
function disptime () {
var now = new Date ();
var hour = now . getHours ();
if ( hour >= 0 && hour <= 12 )
document . write ( "<H2>上午好!</H2>" )
if ( hour > 12 && hour <= 18 )
document . write ( "<H2>下午好!</H2>" );
if ( hour > 18 && hour < 24 )
document . write ( "<H2>晚上好!</H2>" );
document . write ( "<H2>今天日期:" + now . getYear () + "年" + ( now . getMonth () + 1 ) + "月" + now . getDate () + "日</H2>" );
document . write ( "<H2>现在时间:" + now . getHours () + "点" + now . getMinutes () + "分</H2>" );
}
</ SCRIPT >
</ HEAD >
< BODY onload = "disptime( )" >
</ BODY >
</ HTML >
动态时钟显示
setTimeout的用法：
setTimeout （“ 调用的函数 ” , ” 定时的时间 ”）
示例
var myTime ＝ setTimeout ( "disptime( )" , 1000 );
效果
源代码
< SCRIPT language = "JavaScript" >
function disptime () {
var time = new Date (); //获得当前时间
var hour = time . getHours (); //获得小时、分钟、秒
var minute = time . getMinutes ();
var second = time . getSeconds ();
/*设置文本框的内容为当前时间*/
document . myform . myclock . value = hour + ":" + minute + ":" + second + " " ;
/*设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示*/
var myTime = setTimeout ( "disptime()" , 1000 );
}
</ SCRIPT >
< INPUT name = "myclock" type = "text" value = "" size = "10" >
源代码
< HTML >
< HEAD >
< META http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< TITLE > settimeout方法</ TITLE >
< SCRIPT language = "JavaScript" >
function disptime () {
var time = new Date (); //获得当前时间
var hour = time . getHours (); //获得小时、分钟、秒
var minute = time . getMinutes ();
var second = time . getSeconds ();
/*设置文本框的内容为当前时间*/
document . myform . myclock . value = hour + ":" + minute + ":" + second + " " ;
/*设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示*/
var myTime = setTimeout ( "disptime()" , 1000 );
}
</ SCRIPT >
< STYLE type = "text/css" >
<! --
/*设置样式：无边框的文本框*/
INPUT {
font-size : 30 px ;
border-style : none ;
background-color : #FF8B3B ;
}
-- >
</ STYLE >
</ HEAD >
< BODY onLoad = "disptime( )" >
< FORM NAME = "myform" >
< TABLE width = "100%" border = "0" align = "center" >
< TR >
< TD colspan = "3" >< IMG src = "images/mosou.jpg" width = "1001" height = "457" ></ TD >
</ TR >
< TR >
< TD width = "37%" > </ TD >
< TD width = "41%" >
< H2 > 当前时间：
< INPUT name = "myclock" type = "text" value = "" size = "10" >
</ H2 >
</ TD >
< TD width = "22%" > </ TD >
</ TR >
</ TABLE >
</ FORM >
</ BODY >
</ HTML >
history和location对象
效果
源代码
< TD width = "4%" >< A href = "javascript: history.back( )" > 返回 </ A ></ TD >
< TD width = "4%" >< A href = "javascript: history.forward( )" > 前进</ A ></ TD >
< TD width = "4%" >< A href = "javascript: location.reload( )" > 刷新</ A ></ TD >
源代码
< HTML >
< HEAD >
< META http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< TITLE > 教育</ TITLE >
< STYLE type = "text/css" >
<! --
/*设置无下划线的超连接样式*/
A {
color : blue ;
text-decoration : none ;
}
A : hover {
/*鼠标在超链接上悬停时变为颜色*/
color : red ;
}
-- >
</ STYLE >
</ HEAD >
< BODY >
< FORM name = "form1" method = "post" action = "" >
< TABLE width = "100%" border = "0" cellpadding = "0" cellspacing = "0" >
< TR >
< TD colspan = "7" >< IMG src = "./images/head1.jpg" width = "994" height = "37" ></ TD >
</ TR >
< TR >
< TD width = "15%" > </ TD >
< TD width = "32%" >< A href = "#" > 1</ A >< A href = "#" ></ A >< A href = "#" > 2</ A >< A href = "#" ></ A >< A
href = "#" > 3</ A >< A href = "#" > 4</ A >< A href = "#" ></ A >< A href = "#" > 5</ A >< A href = "#" ></ A >< A
href = "#" > 6</ A >< A href = "#" > 下一页</ A > </ TD >
< TD width = "4%" >< A href = "javascript: history.back( )" > 返回 </ A ></ TD >
< TD width = "4%" >< A href = "javascript: history.forward( )" > 前进</ A ></ TD >
< TD width = "4%" >< A href = "javascript: location.reload( )" > 刷新</ A ></ TD >
< TD width = "6%" >< A href = "./index.html" > 首页</ A ></ TD >
< TD width = "35%" >
< SELECT name = "selTopic" id = "selPTopic" onChange = "javascript: location=this.value" >
< OPTION value = "news.html" > 新闻贴图</ OPTION >
< OPTION value = "gard.html" > 网上谈兵</ OPTION >
< OPTION value = "IT.html" > IT茶馆</ OPTION >
< OPTION value = "education.html" selected > 教育大家谈</ OPTION >
</ SELECT >
</ TD >
</ TR >
< TR >
< TD colspan = "7" >< IMG src = "./images/content1.jpg" width = "995" height = "576" ></ TD >
</ TR >
</ TABLE >
</ FORM >
</ BODY >
</ HTML >