浏览器对象模型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. MyEclipse优化攻略搜集

    1 首先内存设置 不会报讨厌的内存溢出out of memory 和 henp space 在 myeclipse.ini把大小调成一样是因为不让myeclipse频繁的换内存区域的大小. #utf8 ...

  2. 阻塞IO和非阻塞IO

    1 TCP协议 每一个TCP通信的的socket的内核里面都会有一个发送缓冲区和接收缓冲区 发送端 : send 报文 -- TCP发送缓冲区 -- 接收端 :TCP接收缓冲区 -- receive ...

  3. ASE19团队项目alpha阶段model组 scrum6 记录

    本次会议于11月8日,19时整在微软北京西二号楼sky garden召开,持续15分钟. 与会人员:Kun Yan, Lei Chai, Linfeng Qi, Xueqing Wu, Yutong ...

  4. SpringBoot+MyBatis+Mysql 6.X 版本日期型数据获,时间错乱,jason序列化时间相差8小时问题

    新项目是用的springboot+mybatis+mysql 6.0.6版本的驱动包来搭建的,在使用的过程中遇到以下2个问题 从mysql取的的数据日期时间,与真实的时间往后错乱了14个小时. spr ...

  5. SQL脚本优化

    1.创建索引一.要尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引   (1)在经常需要进行检索的字段上创建索引,比如要按照表字段username进行检索,那么就应 ...

  6. 【github】github的使用

    一.上传本地代码 1.在github上新建一个repository(命名为英文) 2.打开cmd,进入上传代码所在目录 3.输入如下命令 第一步:git init --建仓第二步:git add  * ...

  7. 用 Spark 处理复杂数据类型(Array、Map、JSON字符串等)

    split 对列表进行切割,然后生产新的列表 from pyspark.sql.functions import split# 对 key列按照 0-9之间的数字进行风格 重新命名为 s  df.se ...

  8. 顺丰科技面试-java开发

    顺丰科技的面试官感觉人都挺随和,总共经历三面,两轮技术面,一轮hr面. 一.专业面一 主要是对着我的简历上的东西问,我的一个项目经历,两个实习上面以及自己提到会的技能展开的提问. (1)自我简介 (2 ...

  9. C++ 内存泄露和内存越界

    内存泄露:分配了内存而没有释放,逐渐耗尽内存资源,导致系统崩溃内存越界: 打个比方 就是你有一个500ml的水瓶,然后你倒在瓶里的水大于500ml 那个多余的就会流出来... 1. 原理分析经常有些新 ...

  10. Java入门第二季——Java中的this关键字

    如果想访问一个private属性,通常会使用setter和getter方法来操作属性,属性名经常会与参数名相同,我们为了区分属性和参数的概念,我们会在属性前面加上this关键字,此时代表我将一个参数的 ...