day09-Bom操作

BOM概述

BOM（browser object model） 浏览器对象模型: 浏览器将他提供的API放在window 上面,window是一个顶级对象也是全局对象。我们可使用这个对象中的方法来对浏览器进行一些操作。
window对象下有一个名为 ‘name’ 的属性，所以平常命名变量避免使用name命名
对于Bom并没有统一的标准，每个浏览器均有差异。兼容性不好

浏览器提供的一些方法

1. 没啥用的弹窗

        alert('alert: 信息提示')
        prompt('prompt: 输入框')
        // 确定返回true  取消返回false, 不推荐使用
        confirm('confirm： 确认框')

2. 获取页面宽高/屏幕宽高

        var w = window.innerWidth
        var h = window.innerHeight
	    var screenW = window.screen.width
        var screenH = window.screen.height
        console.log(w, h);
        console.log(screenW , screenH );

3. 滚动条

			/* 获取滚动条滚动的宽度和高度
	            - 高度  scrollTop
	            - 宽度  scrollLeft
	            - 注意：此处获取的时候有兼容性问题  有可能是body的滚动条 有可能是html的滚动条
	            - 兼容性获取
           */
                 var h = document.body.scrollTop || document.documentElement.scrollTop
                 var w = document.body.scrollLeft || document.documentElement.scrollLeft
		
            // 设置滚动条的高度和宽度
                document.body.scrollTop = 100
                document.documentElement.scrollTop = 100
            // scrollTo方法
            /*
                 window.scrollTo(x, y)
                    - x是设置横向滚动条的宽度
                    - y是设置纵向滚动条的高度
            */
                 window.scrollTo({
                    left: 500,
                    top: 600,
                    behavior: 'smooth'  //'auto'  默认为auto ， smooth为平滑滚动
                })

4. location对象

• 获取网页地址栏相关的信息
  • 一个完整的网址组成部分有哪些
    • eg: https://wwww.baidu.com:443/home/a/b?kk=1&ll=44&ffs2=44#jaja
    • 协议 http:// https:// file://
    • 域名 www.baidu.com www.taobao.com
    • 端口号 这个一般被隐藏了 但是他确实存在 :数字 [0, 65535]
    • 路径 /home/a/b
    • 请求参数 ?kk=1&ll=44&ffs2=44
    • 哈希值 #jaja
    • 一个网址必须包含 协议+域名+端口号称为 源
  • location对象
    • 这个对象里面包含了我们需要的所有地址栏的信息
    • 可以通过这个对象获取地址栏每一个部分
    • location.href: 获取或设置完整的 URL 地址。
    • location.protocol: 获取或设置 URL 的协议部分，如 “http:” 或 “https:”。
    • location.host: 获取或设置 URL 的主机名和端口号部分。
    • location.hostname: 获取或设置 URL 的主机名部分。
    • location.port: 获取或设置 URL 的端口号部分。
    • location.pathname: 获取或设置 URL 的路径部分。
    • location.search: 获取或设置 URL 的查询参数部分，包括 “?” 符号。
    • location.hash: 获取或设置 URL

这里我们可以在浏览器的控制台中进行交互

打开 window.open()
刷新 location.reload()
关闭 window.close()

        var url = 'https://y.qq.com/'

        window.open(url)
        setTimeout(function(){
            location.reload()
        },2000)
  
        setTimeout(function(){
            window.close()
        },2000)

跳转
   location.assign(跳转的网址)
   location.href = 跳转的网址
   location.replace(跳转的网址)
前两种跳转是会生成记录 后一种相当于将当前的记录覆盖掉 不会产生新的访问记录

            location.href = 'https://m.163.com/'
            // location.replace('https://www.taobao.com')
            // location.assign('https://www.baidu.com')

5. history对象

history对象
作用： 用于记录当前页面的访问记录，访问过的页面地址均会被history对象保留
1. 访问记录长度
- history.length
2. 前进一个历史记录
- history.forward()
3.后退一个历史记录
- history.back()
4.前进或者后退几个历史记录
- history.go(数字)
- 正数前进，负数后退，0为刷新该页面
pushState和replaceState 这两个方法都会往历史记录添加一个数据 这种操作会改变地址栏的路径部分 但是不会发生跳转
   - history.pushState(stateObj, ‘’, url)
   - history.replaceState(stateObj, ‘’, url)
history.state可以获取当前历史记录堆栈里面存放的数据 这个数据是pushState或者replaceState传递的第一个参数

6. 本地存储与会话存储

1、本地存储: 可以在浏览器里面存放一个数据 可以存储5M的数据( localStorage )

• 存数据
  • localStorage.setItem(名称, 数据)
• 获取数据
  • var 数据 = localStorage.getItem(名称)
• 删除数据
  • localStorage.removeItem(名称)
• 清空所有数据
  • localStorage.clear()

2、会话存储： sessionStorage

• 存数据
  • sessionStorage.setItem(名称, 数据)
• 获取数据
  • var 数据 = sessionStorage.getItem(名称)
• 删除数据
  • sessionStorage.removeItem(名称)

7. 浏览器事件

window提供了一些监听浏览器的事件
1、onload： 网页加载完成事件。 当浏览器加载页面完成时自动触发函数

	window.onload = function(){
		console.log('加载完成。。')
  }

2、 onresize 网页尺寸变化执行的事件。当页面尺寸变化时自动触发函数

	window.onresize = function(){
        // 每一次网页尺寸变化都会触发这个事件
        // 第一次进入的时候是不会触发
        	console.log('变化了。。')
    }

3、onscroll 网页滚动条滚动事件。当滚动条滚动时自动触发函数

    window.onscroll = function(){
        // 只要滚动滚动了就会触发
    }