javascript-之-BOM 浏览器对象模型（ BOM 的核心--window）

Posted 2021-02-28 sunhuan-123

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对象是浏览器的顶级对象,它具有双重角色。

1. 它是JS访问浏览器窗口的一个接口。
2. 它是一个全局对象。定义在全局作用域中的变量。函数都会变成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);
}

以上内容全部由自己整理，如有问题欢迎纠正，一起讨论学习。