常见的BOM对象

BOM是浏览器对象模型,提供了独立于内容与浏览器窗口进行交互的对象,其作用就是根浏览器做一些交互效果。

比如,如何进行页面的后退,前进,刷新,滚动条的滚动等等。

常见的BOM对象有

一. window

BOM的核心对象是window,它表示浏览器的一个实例

所有在全局作用域中声明的变量,函数都会变成window对象的属性和方法。 

var name = '小熊'
function lookName(){
  alert (this.name)
}

console.log(window.name) // 小熊
lookName() // 小熊
window.lookName() // 小熊

一些窗口控制的方法

moveBy(x,y) // 从当前位置水平移动窗体x个像素,垂直移动窗体y个像素
moveTo(x,y) // 移动窗体左上角相对于屏幕左上角的(x,y)点

resizeBy(w,h) // 相对窗体当前的大小,宽度调整w个像素,高度调整h个像素
resizeTo(w,h) // 把窗体宽度调整为w个像素,高度调整为h个像素

scrollTo(x,y)
scrollBy(x,y) // 如果有滚动条,将横向滚动条向左移动x个像素,将纵向滚动条向下移动y个像素

window.open(),既可以导航到一个特定的url,也可以打开一个新的浏览器窗口

// 如果window.open()传递了第二个参数,且该参数是已有窗口或者框架的名称,就会在目标窗口加载第一个参数指定的URL

window.open('http://www.vuewjs.com','topFrame')
// 有一个a标签

window.close(),仅用于通过window.open()打开的窗口 

二. location

例如有一个url地址

http://foouser:[email protected]:80/WileyCDA/?q=javascript#contents 

属性名 例子 说明
hash #contents url中#后面的字符,没有则返回空串
host www.wrox.com:80 服务器名称和端口号
hostname www.wrox.com 域名,不带端口号
href 完整url
pathname /WileyCDA/ 服务器下面的文件路径
port 80 url的端口号,没有则为空
protocol http: 使用的协议
search ?q=javascript url的查询字符串,通常为?后面的内容

除了hash之外,只要修改location的一个属性,就会导致页面重新加载新URL

location.reload()方法可以重新刷新当前页面

这个方法会根据最有效的方式刷新页面,如果页面自上一次请求以来没有改变过,页面就会从浏览器缓存中重新加载,如果要强制从服务器中重新加载,传递一个参数true即可。

三. navigator

navigator对象主要用来获取浏览器的属性,区分浏览器类型。 

常见的BOM对象_第1张图片

常见的BOM对象_第2张图片

四. screen

保存的纯粹是客户端能力信息,也就是浏览器窗口外面的客户端信息,比如像素宽度和高度 

常见的BOM对象_第3张图片五. history

history对象用来操作浏览器URL的历史记录,可以通过参数向前,向后或者向指定URL跳转 

history.go() 

// 接收一个整数数字或者字符串参数,向最近的一个记录中包含指定字符串的页面跳转
history.go('maixaofei.com')

// 当参数为整数数字的时候,证书表示向前跳转指定的页面,负数为向后跳转指定的页面
history.go(3) // 向前跳转三个记录
history.go(-1) // 向后跳转一个记录

history.forward() // 向前跳转一个页面

history.back() // 向后跳转一个页面

history.length // 获取历史记录数

你可能感兴趣的:(javascript,开发语言,ecmascript)