浏览器对象模型BOM,提供了访问浏览器的接口。这些功能大多和网页内容无关,多年来,由于缺乏规范导致BOM中的不同方法在不同浏览器中的实现有所差异,直到html5,才将BOM的主要方面纳入规范。

BOM常用的特性包括:

一、window对象

window对象在浏览器中具有双重角色:它既是ECMAscript规定的全局global对象,又是javascript访问浏览器窗口的一个接口。

1.获取窗口相对于屏幕左上角的位置

//获取窗口相对于屏幕左上角的位置
var leftPos=(typeof window.screenLeft==='number')?window.screenLeft:window:screenX;
var topPos=(typeof window.screenLeft==='number')?window.screenTop:window:screenY;

需要注意的一点是,在IE,opera中,screenTop保存的是页面可见区域距离屏幕左侧的距离,而chrome,firefox,safari中,screenTop/screenY保存的则是整个浏览器区域距离屏幕左侧的距离。也就是说,二者差了一个浏览器工具栏的像素高度。

2,移动窗口,调整窗口大小

window.moveTo(0,0)

window.moveBy(20,10)

window.resizeTo(100,100);

window.resizeBy(100,100);

注意,这几个方法在浏览器中很可能会被禁用。

3.获得浏览器页面视口的大小

var pageWith=document.documentElement.clientWidth||document.body.clientWidth;
var pageHeight=document.documentElement.clientHeight||document.body.clientHeight;

4.导航和打开窗口

window.open()既可以导航到特定的URL,也可以打开一个新的浏览器窗口,其接收四个参数,要加载的url,窗口目标(可以是关键字_self,_parent,_top,_blank),一个特性字符串,以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常只需要传递第一个参数。

注意,在很多浏览器中,都是阻止弹出窗口的。

5.几个时序相关的函数(原来这是BOM的实现,而非ECMAjavascript的实现)

setInterval()

setTimeout()

6.系统对话框,这些对话框外观由操作系统/浏览器设置决定,css不起作用,所以很多时候可能需要自定义对话框

alert():带有一个确定按钮

confirm():带有一个确定和取消按钮

prompt():显示OK和Cancel按钮之外,还会显示一个文本输入域

二、location对象

location对象提供了当前窗口加载的文档的相关信息,还提供了一些导航功能。事实上,这是一个很特殊的对象,location既是window对象的属性,又是document对象的属性。

location.hash  #contents  返回url中的hash,如果不包含#后面的内容,则返回空字符串

location.host  www.wrox.com:80  返回服务器名称和端口号

location.port  80  返回端口号

location.hostname  www.wrox.com  返回服务器名称

location.href  http://www.wrox.com  返回当前加载页面的完整url

location.pathname  /index.html  返回url中的目录和文件名

location.protocol http  返回页面使用的协议

location.search  ?q=javascript  返回url中的查询字符串

改变浏览器的位置:

location.href=http://www.baidu.com

如果使用location.replace('http://www.baidu.com'),不会在历史记录中生成新纪录,用户不能回到前一个页面。

location.reload():重置当前页面,可能从缓存,也可能从服务器;如果强制从服务器取得,传入true参数

三,navigator对象

这个对象代表浏览器实例,其属性很多,但常用的不太多。如下:

navigator.userAgent:用户代理字符串,用于浏览器监测中、

navigator.plugins:浏览器插件数组,用于插件监测

navigator.registerContentHandler 注册处理程序,如提供RSS阅读器等在线处理程序。

四、history对象

history对象保存着用户上网的历史记录,使用go()实现在用户的浏览记录中跳转:

history.go(-1) 等价于history.back()

history.go(1) 等价于 history.forward()

history.go(1) //前进两页

history.go('wrox.com')

javascript中的BOM的更多相关文章

  1. 【学习笔记】:JavaScript中的BOM对象

    JavaScript中的BOM对象 BOM(Browser Object Model):浏览器对象模型. BOM可用于对浏览器窗口进行访问,但BOM没有相关的标准,所以根据浏览器的不同,其中定义的对象 ...

  2. JavaScript中的BOM和DOM

    javascript组成: 1. ECMAScript 基本语法. 2. BOM (浏览器对象模型) 3. DOM (文档对象模型) 简单的说就是 BOM是浏览器对象模型,用来获取或设置浏览器的属性. ...

  3. JavaScript中的BOM知识框架

    浏览器对象模型(BOM)以window对象为依托,表示浏览器窗口及可见区域.同时,window对象和还是全局对象,因此所有求安局变量和函数都是它的属性,所有原生框架及其他函数都在它命名之下.BOM中对 ...

  4. javascript中的BOM对象

    1.window对象 所有的浏览器都支持window对象 概念上讲,一个html文档对应一个window对象 功能上讲,控制浏览器窗口 使用上讲,window对象不需要创建对象,直接使用 2.wind ...

  5. javascript学习之BOM

    BOM是browser object model的缩写,简称浏览器对象模型.先看看下面这张图 window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象. ...

  6. javascript中获取非行间样式的方法

    我们都知道一般在javascript中获取样式一般用的是nodeObj.style.attr这个属性的,但是这个属性只能获取行间样式非行间样式比如写在样式表中的样式那么用nodeObj.style.a ...

  7. javascript中的计时器

    javascript中的定时器有两种:一种是一次性定时器,一种是可以持续使用的定时器: 1:一次性定时器setTimeout(a,b):兼容ie的任何版本 该方法接受两个参数,第一个是要执行的代码,第 ...

  8. JavaScript中定时器

    JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和setInterval()这两个函数来完成.它们向任务队列添加定时任务. setTimeout() ...

  9. JavaScript中的EcMAScript学习笔记

    一.Javascript概述(知道)    a.一种基于对象和事件驱动的脚本语言    b.作用: 给页面添加动态效果    c.历史: 原名叫做livescript.W3c组织开发的标准叫ECMAs ...

随机推荐

  1. Servlet获取JSP中的汉字乱码问题解决方案

    1.String customerName=request.getParameter("customer_name");这样会出现乱码 解决方案很简单: String custom ...

  2. C#连接Oracle数据库的方法

    目前了解C#中连接Oracle数据库的方法有3种,分布是微软的System.Data.OracleClient,Oracle的Oracle.DataAccess.Client和Oracle的Oracl ...

  3. ACCESS打得开mdb,但打不开表,弹框提示未知错误。

    我的电脑有个一个奇怪的错误ACCESS能打开mdb数据库,但是打不开表,一打开就提示错误,只有俩字“未知”.重装OFFICE也不行!而且电脑上使用Access数据库的应用软件都不行了!都提示“未知”错 ...

  4. 设计模式风格<一>;回调风格

    主程序,是一个人,有一个类是同事: static void Main(string[] args) { Console.WriteLine("Hello Go to Lunch?" ...

  5. 08 redis缓存穿透、缓存雪崩、缓存击穿

    Redis缓存的使用,极大的提升了应用程序的性能和效率,特别是数据查询方面.但同时,它也带来了一些问题.其中,最要害的问题,就是数据的一致性问题,从严格意义上讲,这个问题无解.如果对数据的一致性要求很 ...

  6. asp.net page类

    1  page 继承自control类 2 httpServerUtility的transfer方法:请求生命周期将在调用此方法之后终止,将不会触发后续的请求生命周期事件,将直接跳到logReques ...

  7. TTP223 触摸按键

    正面 反面 模式设置 可替代按键开关

  8. 使用nodejs对Marketing Cloud的contact主数据进行修改操作

    假设在Marketing Cloud有这样一个contact主数据: 现在需求是使用编程语言比如nodejs修改这个contact实例的高亮属性. 代码如下: var config = require ...

  9. 【51nod2026】Gcd and Lcm(杜教筛)

    题目传送门:51nod 我们可以先观察一下这个$f(x)=\sum_{d|x}\mu(d) \cdot d$. 首先它是个积性函数,并且$f(p^k)=1-p \ (k>0)$,这说明函数$f( ...

  10. es string 分词完整示例

    "products_name_en": {            "type":  "string", //字符串类型            ...