javascript-之-BOM 浏览器对象模型( BOM 的核心--window)
2020-04-22 09:53
671 查看
BOM(Browser Object Model 浏览器对象模型)
BOM的概述
1、什么是BOM
- BOM(Browser Object Model): 浏览器对象模型
- BOM 的核心就是 window 对象
- 把浏览器当作一个对象来看待 (window 是浏览器内置的一个对象,里面包含着操作浏览器的方法)
- BOM学习是浏览器窗口的一些对象 获取一些浏览器的相关信息(窗口的大小)
- 操作浏览器进行页面跳转
- 获取当前浏览器地址栏的信息
- 操作浏览器的滚动条
- 浏览器的信息(浏览器的版本)
- 让浏览器出现一个弹出框(alert/confirm/prompt)
console.log(window); //我们可以直接在浏览器中console.log(window)查看各种window的属性和方法
window.a = 10; console.log(a); console.log(window.a) // 所有的不带有前缀全局变量的时候,前面都可以带有window. JavaScript默认把window.这个代码给省略; function foo(){ } window.foo();
2、BOM的构成
BOM比DOM更大,它包含DOM
window对象
window对象是浏览器的顶级对象,它具有双重角色。
- 它是JS访问浏览器窗口的一个接口。
- 它是一个全局对象。定义在全局作用域中的变量。函数都会变成window对象的属性和方法。
(在调用的时候可以省略window。)
浏览器的弹出层
- alert是在浏览器弹出一个提示框
这个弹出层是一个提示内容框,只有一个确定按钮,点击确定按钮以后,这个提示框就消失了 - prompt是在浏览器弹出一个输入框
这个弹出层有一个输入框和两个按钮
,当你点击取消的时候,得到的是 null
,当你点击确定的时候得到的就是你输入的内容 - confirm是在浏览器弹出一个询问框
这个弹出层有一个询问信息和两个按钮当你点击确定的时候,就会得到 true,当你点击取消的时候,就会得到 false
// 这三个方法都会阻塞代码执行; // alert("我是一个提示框"); // 以下两个有返回值; // var res=confirm("我是一个询问框"); // console.log(res)//得到布尔值 // var res1=prompt("我是一个输入框"); // console.log(res1)//得到输入内容
window上的各种属性
注意:window下的各种属性或方法名都不要直接用来作为全局变量命,会冲突
window下的子对象
1. 浏览器的地址信息 (location)
- window.location.href 当前页面的 URL,可以获取,可以修改(页面跳转)。
- window.location.hostname web 主机的域名
- window.location.pathname 当前页面的路径和文件名
- window.location.port web 主机的端口 (80 或 443)
- window.location.protocol 所使用的 web 协议(http:// 或 https://)
- window.location.search 请求参数(?后面的内容)
- window.location.reload(); 刷新页面的方法。一般情况下给reload()传递一个true,让他刷新,并不使用缓存。
- 缓存的东西一般为js文件,css文件等。
- 用这个方法可以让自己不能动的页面动起来了。刷新当前页面。
- 注意: 不要写在全局,不然浏览器就会一直处在刷新状态
//js实现页面跳转 location.replace('http://www.baidu.com') location.href = 'http://www.baidu.com' window.open('http://www.baidu.com') location.assign('http://www.baidu.com')
2.浏览器的版本信息(了解)(navigator)
- navigator.appName 返回获取当前浏览器的名称。
- navigator.appVersion 返回 获取当前浏览器的版本号。
- navigator.platform 返回 当前计算机的操作系统。
- 以上属性已经在逐渐被抛弃了。
下面一个新的属性将替代这些属性。 - navigator.userAgent 返回浏览器信息(可用此属性判断当前浏览器)
//判断当前浏览器类型的代码: function isBrowser() { var userAgent = navigator.userAgent; //微信内置浏览器 if(userAgent.match(/MicroMessenger/i) == 'MicroMessenger') { return "MicroMessenger"; } //QQ内置浏览器 else if(userAgent.match(/QQ/i) == 'QQ') { return "QQ"; } //Chrome else if(userAgent.match(/Chrome/i) == 'Chrome') { return "Chrome"; } //Opera else if(userAgent.match(/Opera/i) == 'Opera') { return "Opera"; } //Firefox else if(userAgent.match(/Firefox/i) == 'Firefox') { return "Firefox"; } //Safari else if(userAgent.match(/Safari/i) == 'Safari') { return "Safari"; } //IE else if(!!window.ActiveXObject || "ActiveXObject" in window) { return "IE"; } else { return "未定义:"+userAgent; } }
3. 浏览器的历史记录 (history)
- history.go(1) 参数可写任意整数,正数前进,负数后退
- history.back() 后退
- history.forward() 前进
- history.length 属性 – history对象中缓存了多少个URL(可以记录浏览器究竟在当前有多少个历史;)
4. 浏览器的屏幕 (screen)
- window.screen.width 返回当前屏幕宽度(分辨率值)
- window.screen.height 返回当前屏幕高度(分辨率值)
5. 定时器
- 间隔定时器 setInterval 清除定时器clearInterval
var i = 0 var timer = setInterval(function () { console.log(i++) // 判断终点要在定时器里面写,因为定时器每执行一次都要判断 if (i === 5) { // 停止定时器,根据id来停止 clearInterval(timer) } }, 1000)
- 超时定时器(延时器) setTimeout 清除定时器 clearTimeout
<button onclick="fn()">停止定时器</button> <script> // 3秒之后执行一次 var timer = setTimeout(function () { console.log(123) }, 3000) function fn () { clearTimeout(timer) } </script>
window的事件
1. onload事件: 页面内容加载完成(DOM结构,图片…)后触发
//onload 当浏览器加载结束之后: // 加载没有完成直接就获取了,会导致图片宽高获取失败; // console.log(img.width,img.height); window.onload = function(){ // 放在这个事件里就可以稳定的获取图片的高度; console.log(img.width,img.height); }
2. onscroll事件: 拖动浏览器的滚动条触发此事件。
window.onscroll = function(){ //兼容写法 var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; // document.body; => 获取body元素; // document.documentElement => 获取html元素; console.log(scrollTop); }
3. onresize事件:浏览器窗口缩放所触发此事件。
//onresize 事件会在窗口或框架被调整大小时发生。 window.onresize = function(){ console.log(1); }
以上内容全部由自己整理,如有问题欢迎纠正,一起讨论学习。
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
- Javascript BOM即浏览器对象模型Brower Object Model(Window、Navigator、Screen、History、Location、弹出框、计时器)
- JS--JavaScript操作BOM(浏览器对象模型、window对象概述、window.open()方法打开窗口)
- JavaScript Window -浏览器对象模型(BOM)
- javascript三大模块之一:BOM(浏览器对象模型)---window(二)
- JavaScript window对象 - 浏览器对象模型(BOM),使 JavaScript 有能力与浏览器“对话”
- JavaScript Window-浏览器对象模型
- JavaScript之 ------ 浏览器对象模型 (BOM)
- JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)
- 浏览器对象模型BOM之window
- JavaScript Window - 浏览器对象模型与Window Screen与Window Location
- JavaScript(二、BOM 浏览器对象模型)
- JavaScript---网络编程(6)-Dom和Bom模型概念讲解(节点获取,window对象)
- Javascript浏览器对象模型(BOM)
- javascript--BOM(浏览器对象模型)
- JavaScript基础——浏览器对象模型(BOM)
- Javascript-BOM(浏览器对象模型)
- JavaScript之BOM(浏览器对象模型)
- JavaScript--浏览器对象模型BOM(17)
- JavaScript-BOM(浏览器对象模型)