什么是浏览器对象BOM

jiezi

5 年前

BOM（Browser Object Model）即浏览器对象模型提供了独立于内容而与浏览器窗口进行交互的对象。由于 BOM 主要用于管理窗口与窗口之间的通讯，因此其核心对象是 window。

window.alert()

// 当前 HTML 的 URL
location.href
//  https://www.baidu.com/lastpath/go?name=zhangshan&id=89785#index

// 查询字符串部分
location.search
// ?name=zhangshan&id=89785

// #号后面的值
location.hash
// #index

// 域名
location.host
// www.baidu.com

// 主域名
location.hostname
// baidu.com

// 主域名后面部分 / 路径
location.pathname
// lastpath/go

// 端口号
location.port
// 80(默认端口号)

// 协议部分
location.protocal
// https:

// 加载指定的 URL
location.assign()

// 替换指定的 URL, 不同于 assgin，无法返回
location.replace()

// 刷新
location.reload()

// 前进或者后退指定的页面数
// 正为前进，负为后退
history.go()

// 后退一页
history.back()

// 前进一夜
history.forward()

// 返回用户代理头的字符串
navigator.userAgent

// "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36"

// 返回是否可以支持 cookie
navigator.cookieEnabled

// 返回浏览器名称
navigator.appName // Chrome,IE

// 返回浏览器内核
navigator.appCodeName // Mozilla

// 浏览器的窗口高度
window.innerHeight
// 浏览器的窗口宽度
window.innerWidth

注意：
浏览器窗口的视图不包括 工具栏 和滚动条
也就是说，在全屏状态下，不同浏览器因为不同的浏览器布局（工具栏、收藏栏、搜索栏）导致不同的 innerHeight 和innerWidth

window.open(url, target, specs, replace)

url 要打开窗口的路径
target 打开方法
- _blank 在新窗口打开，默认为_blank
- _self 在原窗口打开，替代原窗口
- _parent 在父框架中打开
- name 指定在某个窗口打开
specs 规定新窗口的样式（用 , 连接）
- width=pixels
- height=pixels
replace 是否在 history 列表中替代当前页面

window.open('https://www.baidu.com', '_self', 'width=1920,height=1080')

window.setTimeout(fn, ms)
window.setInterval(fn, ms)

Cookies 用来在页面储存用户信息

在服务器将页面发送给浏览器后，服务器与浏览器之间的连接就断开了，因为 HTTP 协议是无状态的，此时，服务器就不会记得关于用户的任何信息。

Cookie 就可以来记住用户信息：

当用户访问页面是，他的名字就被储存到 Cookie 中。
当他下次访问页面时，Cookie 就会记得她的名字

name = Kisn

当浏览器向服务器发送网页请求时，对应这个页面的 cookies 就被加入到了请求中，这样的服务器就能获取到辨认这个用户的所需的信息。

JavaScript 可以用个 document.cookie 属性来穿件、读取和删除 cookies

// 创建
function setCookie(name, val, time) {var exp = new Date()

  exp.setTime(exp.getTime() + time)
  document.cookie = name + '=' + val + ';expires=' + exp.toGMTString()}
// 读取
function getCookie(name) {let reg = new RegExp('(^|)' + name + '=([^;]*(;|$))')

  if ((res = document.cookie.match(reg))) {return unescape(res[2])
  } else {return false}
}

// 删除

function delCookie(name) {let exp = new Date()
  exp.setTime = exp.getTime() - 1
  let cval = getCookie(name)
  if (cval != null) {document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString()
  }
}

http 是一种无状态协议，因此 Cookie 的最大的作用是储存 sessionId 用辨识用户

共同点
- 都是保存在浏览器端，并且是同源的
不同点
- Cookie:
  - 储存大小：4KB
  - 参与服务器通信
  - 只要是同源的 http 请求中，都会存在 cookie，即 cookie 在浏览器和服务器之间来回传递，而且有实效（expires）。cookie 有路径的概念，我们可以限制 cookie 只属于某个路径下
- sessionStorage:
  - 储存大小：5M
  - 不参与服务器通信
  - 仅在当前浏览器窗口（该进程）会话期间有效，数据不是服务器请求储存的，而且只有在请求时使用数据。
- localStorage:
  - 储存大小：5M
  - 不参与服务器通信
  - 在同源窗口可以共享，但是除非数据被清除，否则会一直存在。数据不是服务器请求储存的，而且只有在请求时使用数据。

XSS 是什么？

XSS 全称跨站脚本攻击，我们可以理解为：通过某种方法向 web 页面注入代码，同时浏览器可以被执行这段代码。
比如简单的论坛回复，可以插入部分 HTML、CSS、JS，可以获取我们的 Cookie

我们可以在 HTTP 头部配置，来防御 XSS 获取 Cookie。

set-cookie: httponly // 禁止 js 脚本来访问 cookie
set-cookie: secure // 仅在请求为 https 的时候发送 cookie

screen.width 显示器的宽度
screen.height 显示器的高度
screen.availWidth 屏幕的可用宽度
screen.availHeight 屏幕的可用高度

什么是浏览器对象BOM

什么是 BOM?

相关方法(属性)

弹出框

URL 的属性

history 对象

Navigator 对象

size

open

计时事件

Cookies

什么是 Cookies

储存方式

操作 cookies 的方法

Cookie 和 Session 的区别

Cookie、sessionStorage、localStorage 的区别

Cookie 如何防范 XSS 攻击

XSS 是什么？

screen