web前端学习（四）JavaScript学习笔记部分（8）-- JavaScript 浏览器对象
1、window对象
1.1、window对象：
window对象是BOM的核心，window对象指当前的浏览器窗口
所有javaScript全局对象、函数以及变量均自动生成为window对象的成员
全局变量是window对象的属性
全局函数是window对象的方法
甚至HTML DOM的document也是window对象的属性之一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> window.document.write("hello");/*这个效果和不写window.是一样的*/ </script> </body> </html>
1.2、window尺寸
window.onnerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
备注：这个高度和宽度计算的不包含工具栏和滚动条这一部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> document.write(`高度：`+window.innerHeight+`,宽度：`+window.innerWidth);/*这个效果和不写window.是一样的*/ </script> </body> </html>
1.3window方法：
window.open() - 打开新窗口
window.close() - 关闭当前窗口
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn" onclick="btnOnClick()">按钮</button> <script> function btnOnClick(){ window.open("array1.html","hahaha","width=300,height=300,top=300,left=300,toolbar=yes") /*要打开的窗口名|窗口命名|属性设置|toolbar设置属性如何显示，谷歌浏览器直接没有toolbar*/ window.close();/*关闭当前窗口*/ } </script> </body> </html>
2、计时器
2.1、计时事件
通过使用JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行，我们称之为计时事件
2.2、计时方法：
1、setInterval() - 间隔指定的毫秒数不停地执行指定的代码
clearInterval() - 方法用于停止setInterval()方法执行的函数代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn" onclick="stopTime()">anniu</button> <p id="ptime"></p> <script> var mytime = setInterval(function(){ getTime(); },1000) function getTime(){ var d = new Date(); var t = d.toLocaleTimeString(); document.getElementById("ptime").innerHTML = t; } function stopTime(){ clearInterval(mytime); } </script> </body> </html>
2、setTimeout() - 暂停指定的毫秒数后执行指定的代码
clearTimeout() - 方法用于停止执行setTimeout()方法的函数代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn" onclick="myWin()">弹出一次</button> <button id="btn2" onclick="myWin2()">一直弹出</button> <button id="btn3" onclick="stopWin()">停止弹出</button> <script> var win; function myWin(){ win = setTimeout(function(){ alert("hello"); },3000); } function myWin2(){ alert("hello"); win = setTimeout(myWin2,3000); /*方法自己调用自己可以一直执行*/ } function stopWin(){ clearInterval(win); } </script> </body> </html>
区别：第一个方法是一只调用函数，第二种方法是一直自己调用自己
3、History对象
3.1、History对象：
window.history对象包含浏览器的历史(url)的集合
3.2、History方法：
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
history.go() - 进入历史中的某个页面（当前页面是0，可以往前是负数，往后是正数）
history1.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="history2.html">点击跳转到history2.html</a> <button id="btn" onclick="forwardJump()">向前进(下一个页面)跳转</button> <script> function forwardJump(){ history.forward(); } </script> </body> </html>
history2.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn" onclick="goceshi()">点击跳回到之前的页面</button> <script> function goceshi(){ history.back();/*返回到之前的界面*/ } </script> </body> </html>
history.go()用法：
home.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主页</title> </head> <body> <a href="login.html">进入登录验证界面</a> </body> </html>
login.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录界面</title> </head> <body> <form action=""> <input type="text" id = username> </form> <button id="btn" onclick="safe()">确认</button> <script> function safe(){ var name = document.getElementById("username").value; if(name == "hello"){ history.go(-1); }else{ alert("输入错误"); } } </script> </body> </html>
4、Location对象
4.1、Location对象：
window.location对象用于获得当前页面的地址（URL），并把浏览器重新定向到新的页面
4.2、Location对象的属性：
location.hostname: 返回web主机的域名
location.pathname: 返回当前页面的路径和文件名
location.port: 返回web主机的端口
location.protocol: 返回所使用的web协议(http://或https://)
location.href: 属性返回当前页面的URL
location.assign()方法加载新的文档
<!DOCTYPE html> <!--suppress ALL --> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div"> <button id="btn1" onclick="getLoc()">按钮1</button> <button id="btn2" onclick="reNew()">按钮2</button> <p id="ptime"></p> </div> <script> function getLoc(){ document.getElementById("ptime").innerHTML = window.location.port; var newnode = document.createElement("div"); document.getElementById("div").appendChild(newnode); newnode.innerHTML = window.location.port; } function reNew(){ location.assign("http://www.baidu.com"); } </script> </body> </html>
5、Screen对象
5.1、Screen对象：
window.screen对象包含有关用户屏幕的信息
5.2、属性：
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
screen.height - 屏幕高度
screen.width - 屏幕宽度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> document.write(`可用高度`+screen.availHeight+`，可用宽度`+screen.availWidth+`<br/>`); document.write(`整体高度`+screen.height+`，整体宽度`+screen.width+`<br/>`); </script> </body> </html>
