day 2-22

BOM

BOM:browser object model浏览器对象模型

提供了独立于内容可以与浏览器窗口进行互动的对象结构

由多个对象组成，代表浏览器窗口对象的Window对象是BOM顶层对象，其他对象都是其子对象

window

浏览器顶级对象，调用其下方法时可以省略window
特殊：window.name、window.top

加载对象

window.onload

网页加载完毕后立刻执行的操作

一个要执行的函数语法：

window.onload = funcRef;

在页面加载完成后 funcRef 方法会被调用。

多个要执行的函数语法：

window.onload=function(){
    Func1();
    Func2();
    Func3();
    .....
}

window.open()

window.open('https://www.baidu.com'); 
//打开一个窗口直接跳转
window.open('https://www.baidu.com', 'wroxWindow', 'height=400,width=400,top=10,left=10,resizable=yes');
// 打开400x400像素可缩放的小窗口，离屏幕左边和顶部10px，第二个参数不是已有的参数

height/width：新窗口的宽高
left/top：距离屏幕的位置
resizable：是否可以拖动改变窗口大小 默认为no

window.open()返回一个对新窗口的引用
如果浏览器内置的弹窗屏蔽机制阻止了弹窗，window.open()可能会返回null
需要使用try/catch包装起来

let blocked = false;
    try {
      let wroxWin = window.open('https://www.baidu.com', '_blank');
      if (wroxWin == null) {
        blocked = true;
      }
    } catch (ex) {
      blocked = true;
    }
    if (blocked) {
      alert('不让弹了~')
    }

setTimeout()/setInterval()

区别：
​ setTimeout():用于指定一段时间后执行某些代码

​ setInterval():每隔一段时间执行某些代码

setTimeout()

参数：

• 第一个参数：一个函数，或者包含JS代码的字符串；

• 第二个参数：毫秒，也就是说经过多少毫秒后执行这些代码

• JS维护了一个任务队列，并不是说多少毫秒后就一定能执行这段程序，这个毫秒只是将这个程序添加进任务队列中，先进先出

• 如果队列不为空，必须等前面队列中的代码执行完后才能执行

示例：

setTimeout(() => {
      alert('tan');
    }, 3000)   //经过3s后弹出，但是不一定是三秒

clearTimeout() 清除计时任务

let setTime = setTimeout(() => {
      alert('tan');
    }, 3000);
clearTimeout(setTime);

setInterval()

参数：

• 第一个参数：一个函数，或者包含JS代码的字符串；
• 第二个参数：____毫秒执行一次代码；

示例：

setInterval(() => {
      alert('好~');
    }, 3000); //3s弹一次

• clearInterval() 清除定时任务

系统对话框

1. alert()

2. confirm()

确认对话框，有确定和取消两个按钮，可以根据点击的不同按钮进行不同的事件操作

3. prompt()

提示框，提示用户输入信息，提示框会有一个文本框，有确定和取消两个按钮。点击确定返回文本框输入的值，取消或者关闭提示框，返回null；
没输入时返回一个空字符串

location 对象

操作地址

• assign（）

location.assign('https://www.baidu.com/');

打开页面立即跳转，同时在浏览器历史记录中增加一条记录

• replace()

 location.replace('https://www.baidu.com/');

打开页面跳转 记录不会被添加，浏览器后退按钮无法使用

• reload()

 location.reload(); 
 //重新加载 不一定从服务器加载
 location.reload(true);  
 //重新加载 从服务器加载

navigator 对象

userAgent(用户代理)来判断浏览器信息

history 对象

导航

• history.go()

  • +n 为前进n页 类似浏览器的向前按钮
  • -n 为后退n页 类似浏览器的向后按钮

history.go(-2);	 
//后退两页
history.go(1);
//前进一页

• history.back()

加载 history 列表中的前一个 URL

history.forward();

可以跳转到下一个页面

history.length 返回历史记录中有多少条记录