JavaScript程序设计（八）——windows对象

十、windows对象

Window 对象表示浏览器中打开的窗口。

1、windows对象的属性

innerheight 返回窗口的文档显示区的高度。
innerwidth 返回窗口的文档显示区的宽度。
outerheight 返回窗口的外部高度。
outerwidth 返回窗口的外部宽度。

2、windows对象的方法

1) open() 打开一个新的浏览器窗口或查找一个已命名的窗口。

格式为：window.open(URL,name,features,replace)
**窗口特征（Window Features）**

width=pixels 窗口的文档显示区的宽度。以像素计。
height=pixels 窗口文档显示区的高度。以像素计。
left=pixels 窗口的 x 坐标。以像素计。
top=pixels 窗口的 y 坐标。
toolbar=yes|no 是否显示浏览器的工具栏。
titlebar=yes|no 是否显示标题栏。
menubar=yes|no 是否显示菜单栏。
scrollbars=yes|no 是否显示滚动条。
status=yes|no 是否添加状态栏。
resizable=yes|no 窗口是否可调节尺寸。
location=yes|no 是否显示地址字段。

例

<!DOCTYPE html>
<html>
<head>
<script>
  function foo(){
    window.open("网页布局.html", "", "height=300,width=400,top=200,left=300,toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no");
  } 
</script>
</head>
<body>
<input type="button" onClick="foo()" value="时间">
</body>
</html>

图片说明
点击按钮就会弹出一个新的窗口：

2) alert() 显示带有一段消息和一个确认按钮的警告框。

3) confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。

例：

  function foo() {
    var r = confirm("Press a button")
    if (r==true)
      document.write("You pressed OK!")
    else
      document.write("You pressed Cancel!")
  }

点击不同的按钮，下一步的显示也会不一样：
图片说明
<——按确定；按取消——>

4) prompt() 显示可提示用户进行输入的对话框。

格式为：prompt(text,defaultText)

text 为要在对话框中显示的纯文本。
defaultText 为默认的输入文本。

例：

  function foo() {
    var name=prompt("Please enter your name","")
    if (name!=null && name!="")
      document.write("Hello " + name + "!")
  }

图片说明
输入123后显示：

5) close() 关闭浏览器窗口。

只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭。

6) setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。

格式为：setInterval(code,millisec)

code 为要调用的函数或要执行的代码串。
millisec 为周期性执行或调用 code 之间的时间间隔，以毫秒计

7) clearInterval() 取消由 setInterval() 设置的 timeout。

格式为：clearInterval(id_of_setinterval)

id_of_setinterval 由 setInterval() 返回的 ID 值。

例：

<html>
<head>
<script>
var id=self.setInterval("clock()",1000)
function clock(){
  var t=new Date()
  document.getElementById("clock").value = t;
}
</script>
</head>
<body>
<input type="text" id="clock" size="50" />
</form>
<button onclick="window.clearInterval(id)">
Stop interval</button>
</body>
</html>

图片说明

8) setTimeout() 在指定的毫秒数后调用函数或计算表达式。

格式为：setTimeout(code,millisec)

code 为要调用的函数后要执行的 JavaScript 代码串。
millisec 为在执行代码前需等待的毫秒数。

9) clearTimeout() 取消由 setTimeout() 方法设置的 timeout。

格式为：clearTimeout(id_of_settimeout)
id_of_settimeout 由 setTimeout() 返回的 ID 值。

例：

<html>
<head>
<script>
var c=0
var t
function timedCount(){
  document.getElementById('txt').value=c
  c=c+1
  t=setTimeout("timedCount()",1000)
}
function stopCount(){
  clearTimeout(t)
}
</script>
</head>
<body>
<form>
<input type="button" value="开始计时！" onClick="timedCount()">
<input type="text" id="txt">
<input type="button" value="停止计时！" onClick="stopCount()">
</form>
<p>
请点击上面的“开始计时”按钮。输入框会从 0 开始一直进行计时。点击“停止计时”可停止计时。
</p>
</body>
</html>

图片说明

3、windows对象的事件

onload事件，当打开网页时就会激发onload事件。
onunload事件
例：

<html>
<head>
<script>
function foo(){
  alert("欢迎访问网站！");
}
function bar(){
  alert("欢迎下次再来！");
}
//window.onload = foo;
</script>
</head>
<body onload="foo()" onunload="bar()">
<a href="http://www.163.com">aaaaa</a>
</body>
</html>

刚打开网页时：
图片说明

4、windows对象的子对象

screen对象，包含客户端显示屏的信息。
document对象，代表整个 HTML 文档，用来访问页面中的所有元素。
history对象，包含了浏览器窗口访问过的 URL。
Navigator对象，包含客户端浏览器的信息。
location对象，包含了当前URL的信息。