BOM用法
一、BOM简介
BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
Window对象是客户端JavaScript最高层对象之一，由于window对象是其它大部分对象的共同祖先，在调用window对象的方法和属性时，可以省略window对象的引用。例如：window.document.write()可以简写成：document.write()
二、window对象
看上面的例子你会发现，name直接封装到了window对象上，了解一下就可以了。
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。全局函数是 window 对象的方法。
接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一
一些常用的Window方法：（在浏览器调试器的console里面输入下面这些属性或者方法，就能看到对应的效果）
- window.innerHeight - 浏览器窗口的内部高度
- window.innerWidth - 浏览器窗口的内部宽度
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口 (只能关闭用js的window.open()打开的页面，了解一下就行了)
// 打开窗体,本页面跳转 window.open("http://www.baidu.com","_self"); // 打开窗体,新窗口跳转 window.open("http://www.baidu.com","_blank","width=1px,height=1px");
三、弹出框（windows子对象）
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
3.1 警告框
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
语法：
window.alert("你看到了吗？");
3.2 确认框
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
var res = window.confirm("111") console.log(res)
3.3 提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为默认值，就是第二个参数，如果没有默认值那么返回null。
语法：
var res = window.prompt("请输入您的银行卡密码:") console.logv(res,typeof(res))
四、location对象（windows子对象）
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
常用属性和方法：
location.href //获取URL location.href="URL" // 跳转到指定页面 location.reload() //重新加载页面,就是刷新一下页面
五、history对象（windows子对象）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> history 对象 和 navigator 对象 </title> </head> <body> <button onclick="func1()">查看history历史对象</button> <button onclick="func2()">上一页</button> <button onclick="func3()">下一页</button> <button onclick="func4()">刷新</button> <script> function func1(){ console.log(history) } function func2(){ history.go(-1) } function func3(){ // 跳转第一页 history.go(1) // 跳转到第二页 history.go(2) } function func4(){ history.go(0) } console.log(navigator) console.log(navigator.platform) // 判断是pc端还是移动端 console.log(navigator.userAgent) // 用在爬虫中,未造成浏览器进行爬取数据 </script> </body> </html>
六 navigator对象
浏览器对象，通过这个对象可以判定用户所使用的浏览器，包含了浏览器相关信息。
console.log(navigator) console.log(navigator.platform) // 判断是pc端还是移动端 console.log(navigator.userAgent) // 用在爬虫中,未造成浏览器进行爬取数据
七、定时器
定时器是基于单线程的异步并发操作
通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件
window.setInterval(函数,间隔时间(毫秒)) // 定时执行多次任务 window.setTimeout(函数,间隔时间(毫秒)) // 定时执行一次任务
// 清除定时器 window.clearInterval(id号) window.clearTimeout(id号)
// 创建一个定时器1 // var id1 = window.setInterval(func,1000) // 创建一个定时器2 var id2 = window.setTimeout(func,1000) var count = 1 // 执行任务 当前函数可以预加载 function func(){ console.log("当前数值为:",count) if(count == 10){ // 杀死定时器1 // window.clearInterval(id1) // 杀死定时器2 window.clearTimeout(id2) } count++ }
