window对象
- window对象
window对象是BOM核心,window对象指当前的浏览器窗口
所有Javascript全局对象、函数以及变量均自动成为window对象的成员
全局变量是window对象的属性
全局函数是window对象的方法
甚至HTML DOM的document也是window对象的属性之一 - window尺寸
window.innerHeight
— 浏览器窗口的内部高度(不包含工具栏和滚动条)window.innerWidth
— 浏览器窗口的内部宽度 - window方法
window.open(url, window name, style)
— 打开新窗口window.close()
— 关闭窗口
计时器
- 计时事件:通过使用Javascript,可以做到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行,称之为计时事件
- 计时方法:通过例子来了解方法
代码示例
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title></title>
6</head>
7<body>
8 <p id="pTime"></p>
9 <button onclick="stopTime()">Stop Time</button>
10</body>
11 <script>
12 // setInterval() 间隔制定的毫秒数 不停地执行指定的代码 (本例中是间隔1000毫秒,不停的执行getTime()这个方法)
13 var mytime = setInterval(function () {
14 getTime();
15 }, 1000);
16 function getTime() {
17 var d = new Date();
18 var t = d.toLocaleTimeString();
19 document.getElementById("pTime").innerText = t;
20 }
21 // clearInterval() 用于停止 setInterval() 方法执行的函数代码
22 function stopTime() {
23 clearInterval(mytime);
24 }
25 </script>
26</html>效果:
代码示例
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title></title>
6</head>
7<body onload="myWin()">
8 <p>每隔3秒,会有弹窗。</p>
9 <button onclick="stopWin()">停止弹窗</button>
10</body>
11 <script>
12 var win;
13 // setTimeout() 暂停制定的毫秒数后执行指定的代码。(这里是一个递归,setTimeout() 中调用了自己,所以才会不断执行,但是 setInterval() 方法是自动重复调用函数代码)
14 function myWin() {
15 alert("Hello");
16 win = setTimeout(function () {
17 myWin();
18 }, 3000);
19 }
20 // clearTimeout() 用于停止执行 setTimeout() 方法的函数代码
21 function stopWin() {
22 clearTimeout(win)
23 }
24 </script>
25</html>效果:
每隔3秒会有显示了【Hello】的弹窗出现,知道点击按钮【停止弹窗】后停止。
History对象
- History对象:window.histroy对象包含浏览器的历史(url)的集合
- History方法:
history.back()
— 与在浏览器点击后退按钮相同history.forward()
— 与在浏览器中点击前进按钮相同history.go()
— 进入历史中的某个界面使用场景:在某些网站,例如CSDN,如果想评论某篇文章时,会要求你先登录。所以先跳转到登陆界面,完成登陆后,再跳转回之前想评论的那篇文章页面。
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Login</title>
6</head>
7<body>
8 <form>
9 <input type="text" id="userName">
10 </form>
11 <button id="btn" onclick="safe()">登陆</button>
12</body>
13 <script>
14 function safe() {
15 var name = document.getElementById("userName").value;
16 // -1表示回到前一个界面
17 if (name = "Yes") {
18 history.go(-1);
19 } else {
20 alert("输入错误");
21 }
22 }
23 </script>
24</html>效果:
Location对象
- Location对象:window.location对象用于获取当前页面的地址(URL),并把浏览器重定向到新的页面。
- Location对象的属性:
location.hostname
— 返回web主机的域名location.pathname
— 返回当前页面的路径和文件名location.port
— 返回web主机的端口location.protocol
— 返回所使用的web协议(http:// 或 https://)location.href
— 返回当前页面的URLlocation.assign()
— 方法加载新的文档这里有一个小的需要注意的地方:
window.location.assign(url)
: 加载 URL 指定的新的 HTML 文档。 就相当于一个链接,跳转到指定的 URL,当前页面会转为新页面内容,可以点击后退返回上一个页面。window.location.replace(url)
: 通过加载 URL 指定的文档来替换当前文档 ,这个方法是替换当前窗口页面,前后两个页面共用一个窗口,所以是没有后退返回上一页的.
Screen对象
- Screen对象:window.screen对象包含有关用户屏幕的信息。
- 属性:
screen.availWidth
— 可用屏幕宽度screen.availHeight
— 可用屏幕高度screen.Height
— 屏幕高度screen.Width
— 屏幕宽度