2020-12-19

BOM

window 对象

通过var声明的所有变量都会变成window对象的属性和方法

window.open()

window.open()

window.open('https://juejin.cn'); //打开一个窗口直接跳转
window.open('https://juejin.cn', '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://juejin.cn', '_blank');
      if (wroxWin == null) {
        blocked = true;
      }
    } catch (ex) {
      blocked = true;
    }
    if (blocked) {
      alert('不让弹了~')
    }

setTimeout()/setInterval()

区别：

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

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

• setTimeout()
  • 参数：
    • 第一个参数：一个函数，或者包含JS代码的字符串；
    • 第二个参数：毫秒，也就是说经过多少毫秒后执行这些代码
  • JS维护了一个任务队列，并不是说多少毫秒后就一定能执行这段程序，这个毫秒只是将这个程序添加进任务队列中，先进先出
  • 如果队列不为空，必须等前面队列中的代码执行完后才能执行

示例：

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

• clearTimeout() 清除计时任务

let setTime = setTimeout(() => {
      alert('掘金大法好~');
    }, 3000);

    clearTimeout(setTime);

• setInterval()

• 与setTimeout用相似

• 参数：

  • 第一个参数：一个函数，或者包含JS代码的字符串；
  • 第二个参数：毫秒，也就是说多少毫秒执行一下这些代码

示例：

setInterval(() => {
      alert('掘金大法好~');
    }, 3000); //每隔3s弹一次

• clearInterval() 清除定时任务

系统对话框

1. alert()

alert() 弹出一个警告框，只有确定这一个选项，接收一个字符串，如果不是字符串调用toString()方法转换为字符串

2. confirm()

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

3. prompt()、

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

啥也不输返回一个空字符串

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2xv7Bs5z-1608378582219)(E:\Element-UI\img\image-20201219171026950.png)]

location 对象

常用属性

假设当前加载的url是’https://juejin.cn/?sort=three_days_hottest#abc;

属性	值(string)	说明
location.hash	#abc	URL散列值，#后面的值，没有返回空
location.host	juejin.cn	服务器名及端口号（默认80）
location.hostname	juejin.cn	服务器名
location.href	https://juejin.cn/?sort=three_days_hottest#abc	完整url
location.pathname	/	URL中路径名或文件名
location.port		端口号
location.protocol	https:	页面使用的协议
location.search	?sort=three_days_hottest	URL的查询字符串，这个字符串以？开头
location.password		域名前指定密码
location.origin	https://juejin.cn	URL的源地址 只读

操作地址

• assign（）

location.assign('https://juejin.cn/');

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

• replace()

 location.replace('https://juejin.cn/');

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

• reload()

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

navigator 对象

• 由于历史原因，Navigator已经不能识别浏览器了

• 一般只是用userAgent(用户代理)来判断浏览器信息

• userAgent流失字符串，用来描述浏览器信息的内容，不同的浏览器userAgent不同

var ua = navigator.userAgent;		
if(/firefox/i.test(ua)){
	alert("火狐");
}else if(/Chrome/i.test(ua)){
	alert("Chrome");
}else if(/msie/i.test(ua)){
	alert("IE");
}else if("ActiveXObject" in window){
	alert("你是IE11");
}

screen 对象

• 这个对象保存的是客户端显示器等一些信息。每个浏览器都会在screen对象上暴露不同的属性

• 这个属性基本是不会被用到

history 对象

导航

• history.go()
  • +n 为前进n页 类似浏览器的向前按钮
  • -n 为后退n页 类似浏览器的向后按钮

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

• history.back() 加载 history 列表中的前一个 URL

• history.forward(); 可以跳转到下一个页面

history.back();
history.forward();

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