常见的浏览器对象

1,923 阅读6分钟

常见的浏览器对象

BOM( Browser Object Model )即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。

  1. window
  2. history
  3. location
  4. navigter
  5. screen
  6. document

window对象

window对象不但充当全局对象,还表示当前浏览器的窗口,

  • 全局变量就是window对象的属性,全局函数就是window对象的方法

alert()

确定提示框

  • 由浏览器向用户弹出提示性信息。该方法包含一个可选的提示信息参数。如果没有指定参数,则弹出一个空的对话框。

prompt()

选择提示框

  • 由浏览器向用户弹出提示性信息,弹出的对话框中包含两个按钮,分别表示“确定”和“取消”按钮。如果点击“确定”按钮,则该方法将返回 true;单击“取消”按钮,则返回 false。confirm() 方法也包含一个可选的提示信息参数,如果没有指定参数,则弹出一个空的对话框。

confirm()

输入提示框

  • 可以接收用户输入的信息,并返回输入的信息。prompt() 方法也包含一个可选的提示信息参数,如果没有指定参数,则弹出一个没有提示信息的输入文本对话框。

window.onload

窗口加载事件

  • 当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等),就调用的处理函数。

window.innerWidth 和 window.innerHeight

获得当前浏览器的宽和高(除去工具栏和滚动条)

窗口方法

  • window.open() - 打开新窗口
  • window.close() - 关闭当前窗口
  • window.moveTo() -移动当前窗口
  • window.resizeTo() -重新调整当前窗口

history对象

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

history.go()

  • 接收一个整数数字或者字符串参数:向最近的一个记录中包含指定字符串的页面跳转
history.go('maixaofei.com')	//向前或者向后寻找指定字符串页面,没有找到则无响应
history.go(3)	//向前跳转三个记录
history.go(-1)	//向后跳转一个记录
  1. history.forword()
  • 向前跳转一个页面
  1. history.back()
  • 向后跳转一个页面
  1. history.length
  • 获取历史记录数,如果是打开的第一个页面,则 history.length == 0,可以用该属性来判断当前打开的网页是不是该窗口打开的首个网页。

location对象

location 属性用于获取或设置窗体的 URL,并且可以用于解析 URL。因为这个属性返回的是一个对象,所以我们将这个属性也称为 location 对象。

URL:

统一资源定位器(Uniform Resource Locator,URL)是互联网上标准资源的地址(俗称网址)。互联网上的每个文件都有一个唯一的 URL,它包含的信息指出文件的位置以及浏览器应该怎么处理它。

  • URL由三部分组成:资源类型、存放资源的主机域名、资源文件名。
  • URL一般语法规格:
protocol :// hostname[:port] / path / [;parameters][?query]#fragment

协议://主机名:端口号/路径/参数
  • 路径:由零或多个“/”符号隔开的字符串,一般用来表示主机上的一个目录或文件地址。
  1. hash
  • 设置或返回从井号 (#) 开始的 URL(锚)。
  1. host
  • 设置或返回主机名和当前 URL 的端口号。
  1. hostname
  • 设置或返回当前 URL 的主机名(域名)。
  1. href
  • 设置或返回完整的 URL。
  1. pathname
  • 设置或返回当前 URL 的路径部分。
  1. port
  • 设置或返回当前 URL 的端口号(如果端口号是默认值(http的端口号为80,https的端口号为443),大部分浏览器显示0或者不显示)。
  1. protocol
  • 设置或返回当前 URL 的协议。
  1. earch
  • 设置或返回从问号 (?) 开始的 URL(查询部分)。

navigter

  1. navigator.appName:浏览器名称;注意:"Netscape" 是 IE11、Chrome、Firefox 以及 Safari 的应用程序名称的统称。
  2. navigator.appVersion:浏览器版本;
  3. navigator.appCodeName:返回浏览器的应用程序代码名称
  4. navigator.language:浏览器设置的语言;
  5. navigator.platform:操作系统类型;
  6. navigator.userAgent:浏览器设定的User-Agent字符串。
  7. navigator.cookieEnabled: 返回 true,如果 cookie 已启用,否则返回 false。
  8. navigator.product:返回浏览器引擎的产品名称
  9. navigator.platform:返回浏览器平台(操作系统)
  10. navigator.onLine: 属性返回 true,假如浏览器在线
  11. navigator.javaEnabled():方法返回 true,如果 Java 已启用

来自 navigator 对象的信息通常是误导性的,

不应该用于检测浏览器版本,因为:

  • 不同浏览器能够使用相同名称
  • 导航数据可被浏览器拥有者更改
  • 某些浏览器会错误标识自身以绕过站点测试
  • 浏览器无法报告发布晚于浏览器的新操作系统

screen

表示用户屏幕的信息

  1. screen.width 返回以像素计的访问者屏幕宽度
  2. screen.height 返回以像素计的访问者屏幕的高度
  3. screen.availWidth 返回访问者屏幕的宽度,以像素计,减去诸如窗口工具条之类的界面特征
  4. screen.availHeight 返回访问者屏幕的高度,以像素计,减去诸如窗口工具条之类的界面特征
  5. screen.colorDepth 返回用于显示一种颜色的比特数
  6. screen.pixelDepth 返回屏幕的像素深度,对于现代计算机,颜色深度和像素深度是相等的。

document

表示当前页面,由于html在浏览器中是以DOM形式表示为树形结构,document对象就是整个DOM树根节点

  • document对象的属性实在是有点多,所以这边就不解释太多,大家可以看官方文档www.w3school.com.cn/js/js_htmld…
  • 不过这边重点介绍一下document.cookies :返回读取当前页面的cookies值

Cookie是由服务器发送的key-value标示符。因为HTTP协议是无状态的,但是服务器要区分到底是哪个用户发过来的请求,就可以用Cookie来区分。当一个用户成功登录后,服务器发送一个Cookie给浏览器,例如user=ABC123XYZ(加密的字符串)...,此后,浏览器访问该网站时,会在请求头附上这个Cookie,服务器根据Cookie即可区分出用户。

  • 由于JavaScript能读取到页面的Cookie,而用户的登录信息通常也存在Cookie中,这就造成了巨大的安全隐患,这是因为在HTML页面中引入第三方的JavaScript代码是允许的;如果引入的第三方的JavaScript中存在恶意代码,则 www.foo.com 网站将直接获取到 www.example.com 网站的用户登录信息。
  • httpOnly:设定了httpOnly类型的cookies不能被JS读取到。整个行为有浏览器控制,现在主流浏览器都支持httpOnly选项。为了确保安全,服务器端在设置cookies时应该始终坚持设置httpOnly选项