浏览器对象模型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. Linux上定时shell脚本

    原文链接:http://www.92coder.com/9-Linux%E5%AE%9A%E6%97%B6shell%E8%84%9A%E6%9C%AC/#more 本文主要介绍在Linux系统上部署 ...

  2. SqlServer2008 R2发布订阅

    网上好多大神写的贴子,自己也看着贴子弄的,写的已经很详细了,我就不重复写了,贴上参考资料: http://www.cnblogs.com/dudu/archive/2010/08/26/1808540 ...

  3. java获取类的3种方式

    1.Class.forName("全类名"):将字节吗文件加载进内存,返回Class对象,多用于配指文件,将类名定义在配置文件中,便于利用java的反射机制生成类对象,加载类. / ...

  4. 启动tomcat提示某个端口被占用

    原文参见:https://www.cnblogs.com/liuyanxia/p/6755520.html 解决办法 找出占用1099端口的进程,进入windows命令,查看什么进程占用了1099端口 ...

  5. LeetCode:197.上升的温度

    题目链接:https://leetcode-cn.com/problems/rising-temperature/ 题目 给定一个 Weather 表,编写一个 SQL 查询,来查找与之前(昨天的)日 ...

  6. 浅谈String、StringBuffer与StringBuilder

    浅谈String.StringBuffer与StringBuilder   先详细介绍一下String.StringBuffer与StringBuilder String: 官方对String的说明: ...

  7. springboot升级2.0 fastjson报错? 2.0以上应该怎么整合fastjson?

    SpringBoot2.0如何集成fastjson?在网上查了一堆资料,但是各文章的说法不一,有些还是错的,可能只是简单测试一下就认为ok了,最后有没生效都不知道.恰逢公司项目需要将JackSon换成 ...

  8. CentOS7.x忘记root密码如何破解

    在CentOS7.x中,有一个单用户模式.CentOS7.x进入单用户模式与CentOS6.x略有不同,要复杂一些. 如果我们忘记了root的密码,可以在单用户模式下重置密码. 注意:此操作必须在服务 ...

  9. 【实用linux命令记录】

    1.显示完整的进程命令 cat /proc/29049/cmdline 如上面显示不完整可用当前的 cat /proc/进程号/cmdline显示 vtysh下显示完整的配置

  10. java——多线程—启动线程

    继承Thread启动线程 package com.mycom.继承Thread启动线程; /** * * 继承Thread类启动线程的步骤 * 1.定义自定义线程类并继承Thread * 2.重写ru ...