BOM操作

BOM (Browser Object Model)

题目

1. 如何识别浏览器类型

const ua  = navigator.userAgent   // 浏览器的用户代理字符串,简称ua
const isChrome = ua.indexOf('Chrome') > -1
console.log(isChrome)

2. 分析拆解URL各个部分

location.protocol  //返回页面使用的协议 通常是 http: 或者 https:
location.port    //返回URL中指定的端口号。如果URL中不包含端口号，则这个属性返回空字符串
location.host   //返回服务器名称和端口号(如果有)
location.hostname  //返回服务器名称不带端口号
location.href  // 返回当前加载页面的完成URL.而location对象的toString方法也返回这个值
location.search  // "?a=xxx"  返回URL的查询字符串。这个字符串以问号开头
location.pathname  //  "/play/video"  返回URL中的目录和(或)文件名
location.hash  // "#contents"  返回URL中的hash(#和#后边的内容)

知识点

• window对象（BOM的核心对象，它表示浏览器的一个实例）
  1. 在浏览器中，window对象有双重的角色，它既是通过javascript访问浏览器的一个接口，又是ECMAScript规定的Global对象，这意味着在网页中定义的任何一个对象，变量和函数，都以window作为起Global对象，因此有权访问parseInt()等方法
2. 由于window对象同时扮演着ECMAScript中的Global对象，因此所有在全局作用域中声明的变量，函数都会变成window对象的属性和方法
3. 但是有一点要注意，定义全局变量和在window对象上直接定义属性还是有区别的：全局变量不能通过delete操作符删除，而直接在window对象上定义的则可以
• navigator对象 用来识别客户端浏览器

// 通过这种方式判断是哪种浏览器并不严谨，但是我们要知道通过 navigator.userAgent可以拿到浏览器的信息
const ua  = navigator.userAgent   // 浏览器的用户代理字符串,简称ua
const isChrome = ua.indexOf('Chrome')
console.log(isChrome)

• screen对象 客户端屏幕的信息

// 屏幕宽度
console.log(screen.width)
// 屏幕高度
console.log(screen.height)

• location对象 它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。

location.protocol  //返回页面使用的协议 通常是 http: 或者 https:
location.port    //返回URL中指定的端口号。如果URL中不包含端口号，则这个属性返回空字符串
location.host   //返回服务器名称和端口号(如果有)
location.hostname  //返回服务器名称不带端口号
location.href  // 返回当前加载页面的完成URL.而location对象的toString方法也返回这个值
location.search  // "?a=xxx"  返回URL的查询字符串。这个字符串以问号开头
location.pathname  //  "/play/video"  返回URL中的目录和(或)文件名
location.hash  // "#contents"  返回URL中的hash(#和#后边的内容)

• history对象 保存着用户上网的历史纪录，从窗口被打开那一刻算起

history.go()  //可以在用户的历史纪录中任意的跳转
history.go(1)  //前进一页
history.go(-1) //后退一页
history.go("abc.com")   // 跳转到最近的 abc.com页面
history.go("def.net")   // 跳转到最近的 def.net页面

history.back() //后退一页
history.forward()  //前进一页