Bom(浏览器对象模型)

Bom

• BOM ==> Browser Object Model (浏览器 对象 模型)

• BOM 的核心就是 window 对象

• window 是浏览器内置的一个对象，里面包含着操作浏览器的方法

获取浏览器的尺寸

innerWidth和innerheight

• (包含浏览器的滚动条)

• var windowWidth = window.innerWidth
  var windowHeight = window.innerHeight

浏览器的弹出层

alert( ); 浏览器弹出提示框

• 这个弹出层知识一个提示内容，只有一个确定按钮

  console.log(alert("我就是一个提示框"));

confirm( ); 弹出一个提示框

• 这个弹出层有一个询问信息和两个按钮

• 当你点击确定的时候，就会得到 true

• 当你点击取消的时候，就会得到 false

prompt( ); 弹出一个输入框

• 这个弹出层有一个输入框和两个按钮

• 当你点击取消的时候，得到的是 null

• 当你点击确定的时候得到的就是你输入的内容

  var str = window.prompt('请输入内容')
  console.log(str)

浏览器的地址信息

• 在 window 中有一个对象叫做 location

• 就是专门用来存储浏览器的地址栏内的信息的

location.herf()

• 不接url,表示直接访问浏览器的完整地址;

  console.log(window.location.href)

  • 会将地址中的中文转码为url中的编码格式

• 也可以通过输入地址的方式实现跳转

  btn.onclick = function(){
      location.reload();
  }

   btn.onclick = function(){
      location.href = 'http://www.baidu.com';
  }

location.reload()

• 重新加载页面,注:建议不要使用在全局不然会不停刷新;

location拓展:

http://localhost/2111/location.html#12345?name=zs&age=123

1. hash( ) 输出地址中#后面的代码;

2. host( ) 访问地址(主机的地址);

3. search( ) 是浏览器中?后面的代码;(相对常用)

history

• 对象的浏览器上面没有清除的历史记录

• 前提:必须要有历史记录

history.back( );

• 返回上一次页面;

  btn.onclick = function(){
      history.back();
  }

history.forward( );

• 前往下一次页面;

  btn.onclick = function(){
      history.forward();
  }

history.go();

• 跳转到指定的页面;

  btn.onclick = function(){
      history.go(-1/1/n);
  }

  数值:1代表前往下一次页面;

  数值:-1 代表返回上一次页面;

  数值:n 正数代表前进n次;负数反之;

navigator(了解 大部分虚假数据)

1. appName 获取到浏览器的名字 html5的兼容问题 不一定有效

   console.log(navigator.appName); // Netscape

2. appversion 浏览器的版本 不一定有效

    console.log(navigator.appVersion);
   //5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36

3. platform 浏览器运行的环境版本 不一定有效

   console.log(navigator.platform); // Win32

4. userAgent 获取浏览器的版本信息

   console.log(navigator.userAgent);
     // Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.90 Safari/537.36

浏览器事件

scroll

• 浏览器滚动事件(注意此事件有兼容问题)

• scrollTop和scrollLeft

• window.onscroll = function(){
      console.log(document.body.scrollTop);
      console.log(document.documentElement.scrollTop);
      console.log(document.body.scrollLeft);
      console.log(document.documentElement.scrollLeft);
  }

load

• 浏览器加载事件,加载完所有的东西(html,css,js,img等)才会运行里面的代码

• 注:一般都用于包裹js代码,

  window.onload = function(){
      alert('洗洗睡了哟');
  }

resize

• 浏览器视口事件

• 当视口发生变化时才会发生的事件

  window.onresize = function(){
      alert("你变了")
      console.log(window.innerWidth);
      console.log(window.innerHeight);
  }

定时器

• 定时器都是有返回值的:返回值是定时器的标识ID(就是数字标识)

• 换算单位是毫秒

setInterval(); 时间间隔定时器

• 语法:setInterval(函数,时间); 每隔一段时间就会执行一次;

  var timeId = setInterval(function(){
      console.log("你还可以敲代码加油别哭")
  },2000)
  console.log(timerId);

setTimeout(); 时间倒计时

• 语法:setTimeout(函数,时间); 倒计时结束后运行一次;

  var timeId = setTimeout(function(){
      console.log("你还可以敲代码加油别哭")
  },2000)
  console.log(timerId);

清除定时器;

• 语法:clearInterval(定时器的标识ID);

• 语法:clearTimeout(定时器的标识ID);

• 任意使用一种都可以清除两种定时器

  var timeId = setInterval(function(){
      console.log("你还可以敲代码加油别哭")
  },2000)
  ​
  var timeId2 = setTimeout(function(){
      console.log("你还可以敲代码加油别哭")
  },2000)
  ​
  btn.onclick =function(){
      clearTimeout(timerId);
      clearTimeout(timerId2)
      clearInterval(timerId);
      clearInterval(timerId2);
  }

  注意: 定时的执行是异步代码执行

  同步执行： 代码按顺序执行

  异步执行： 代码不按顺序执行，先执行同步代码，当所有同步代码执行完毕，才开始执行异步代码