什么是浏览器对象BOM?

发布时间:2020-10-24 整理:编程之家
编程之家收集整理的这篇文章主要介绍了什么是浏览器对象BOM?编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随编程之家小编过来看看吧!

什么是 BOM?

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

 

相关方法(属性)

弹出框

window.alert()

URL 的属性

// 当前 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 对象

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

// 后退一页
history.back()

// 前进一夜
history.forward()

Navigator 对象

// 返回用户代理头的字符串
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

size

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

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

 

open

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)

东莞vi设计https://www.houdianzi.com/dgvi/ 豌豆资源网站大全https://55wd.com

Cookies

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

什么是 Cookies

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

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

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

储存方式

name = Kisn

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

操作 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()
  }
}

Cookie 和 Session 的区别

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

Cookie、sessionStorage、localStorage 的区别

  • 共同点

    • 都是保存在浏览器端,并且是同源的
  • 不同点

    • Cookie:

      • 储存大小:4KB
      • 参与服务器通信
      • 只要是同源的 http 请求中,都会存在 cookie,即 cookie 在浏览器和服务器之间来回传递,而且有实效(expires)。cookie 有路径的概念,我们可以限制 cookie 只属于某个路径下
    • sessionStorage:

      • 储存大小:5M
      • 不参与服务器通信
      • 仅在当前浏览器窗口(该进程)会话期间有效,数据不是服务器请求储存的,而且只有在请求时使用数据。
    • localStorage:

      • 储存大小:5M
      • 不参与服务器通信
      • 在同源窗口可以共享,但是除非数据被清除,否则会一直存在。数据不是服务器请求储存的,而且只有在请求时使用数据。

Cookie 如何防范 XSS 攻击

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

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

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

screen

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

总结

以上是编程之家为你收集整理的什么是浏览器对象BOM?全部内容,希望文章能够帮你解决什么是浏览器对象BOM?所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!