BOM (Browser Object Model)
题目
- 如何识别浏览器类型
const ua = navigator.userAgent // 浏览器的用户代理字符串,简称ua
const isChrome = ua.indexOf('Chrome') > -1
console.log(isChrome)
- 分析拆解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)
// 屏幕宽度
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() //前进一页
网友评论