浏览器对象模型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. 手写map, filter函数

    function map(arr, fn) { let newArr = []; for (let i = 0; i < arr.length; i++) { newArr[i] = fn(ar ...

  2. json字符转java bean忽略大小写

    使用objectMapper进行json字符的解析 com.fasterxml.jackson.databind.ObjectMapper ob =new com.fasterxml.jackson. ...

  3. xss part2

    0x01 xss challenge level 6-10 1.1 level 6 test with typical, notice the script has changed change sc ...

  4. 使用ABAP批量下载Markdown源文件里的图片到本地

    执行我github里的这个report: 选中一段markdown文档,ctrl C: 然后直接执行report: 执行完毕: 所有文件都下载到本地文件夹: 这个report使用到的工具类:zcl_c ...

  5. Java和操作系统交互(Java 代码是怎么执行)(转)

    结合 CPU 理解一行 Java 代码是怎么执行的 根据冯·诺依曼思想,计算机采用二进制作为数制基础,必须包含:运算器.控制器.存储设备,以及输入输出设备,如下图所示. 我们先来分析 CPU 的工作原 ...

  6. MySQL cmd操作

    1.开启关闭服务 net start mysql net stio mysql 2.登陆 在CMD命令窗口敲入命令 mysql -hlocalhost -uroot -p 后按回车(注意这里的&quo ...

  7. python监控CPU/内存/磁盘,超过指定百分比,发送邮件

    #!/usr/bin/python #coding:utf-8 #导入psutil模块 import psutil import yagmail def mail(subject,contents): ...

  8. 解释mysql 语句

    一.在我们创建mysql数据库的时候我们经常会用到这句SQL: CREATE DATABASE TEST DEFAULT CHARACTER SET utf8 COLLATE utf8_general ...

  9. sql临时表 通过临时表循环处理数据

    -- 创建临时表 IF OBJECT_ID('tempdb.dbo.#temprecord','U') IS NOT NULL DROP TABLE dbo.#temprecord; GO SELEC ...

  10. Linux基础知识之文件的权限(一)

    Linux基础知识之文件权限(一) Linux优点之一就是它拥有多用户多任务的环境,在提供文件共享的同时也能保证用户文件的安全性.所以,设置文件的权限管理变得尤为重要. 权限讲解 [der@Der ~ ...