一个完整的JavaScript实现由三部分组成:

  • ECMAScript:核心,定义语言基础,规定了语言的组成部分(语法,类型,关键字,保留字,对象等)
  • DOM:文档对象模型,·DOM把整个页面映射成一个多层节点结构(树形),从而我们可以自如的删除、添加、替换或修改任何节点
  • BOM:浏览器对象模型,支持访问和操作浏览器窗口,使用BOM可以控制浏览器显示的页面以外的部分。

BOM提供了很多对象,用于访问浏览器的功能,以下逐一介绍:

1、window对象

window对象是BOM的核心对象,在浏览器中window对象有两个作用:①充当全局作用域②表示浏览器窗口

①充当全局作用域

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

var a =1;
alert(window.a);//
function fun(){
alert(this.a);
}
window.fun();//

②表示浏览器窗口

  • 窗口位置 screenLeft、screenTop(Firefox不支持这两个属性)分别表示窗口相对于屏幕左边和上边的位置;
    在Firefox浏览器中用screenX、screenY来提供相应的窗口位置信息;以上的属性都无法保证在跨浏览器的条件下取得窗口左边和上边的精确坐标值。
    window.moveTo(新位置的X的坐标,新位置的Y的坐标)、window.moveBy(水平方向上移动的像素数,垂直方向上移动的像素数) 方法可以将窗口精确地移动到一个新的位置。
    这两个方法不适用与框架,只对外层的window对象使用,且在Opera和IE7+中默认是禁用的
  • 窗口大小 outWidth,outHeight;innerWidth、innerHeight  在各个浏览器中所表示的大小含义有所不同
  • 打开窗口 window.open() 既可以打开一个新的浏览器窗口也可以导航到一个特定的URL
    语法:window.open(URL,name,features,replace)

    • URL:要加载的URL;
    • name:可选,窗口的目标 可以是窗口或框架的名字,如果有具有该名字的窗口或框架中,就会在其中加载第一个参数指定的URL,否则就会创建一个新的窗口并为其命名为name;也可以是_self,_parent,_top或者_blank;
    • features 可选,由逗号分隔的设置字符串,表示在新窗口中都显示哪些特性,如:height、left、resizable、status等。在不打开新窗口的情况下会忽略该参数,如果忽略,打开新窗口时采用默认设置;
    • replace 可选,一个布尔值,表示新页面是否取代浏览器历史记录中当前加载页面,该参数只有在不打开新窗口的情况下使用。
  • 窗口关系及框架 如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中。在frames集合中可以通过数组索引或者框架名称来访问相应的window对象  如:window.frames[0]
  • 显示”打印“对话框  window.print();

2、location对象:表示当前页面的URL信息

location对象提供了与当前窗口中加载的文档的URL有关的信息;通过访问location的不同的属性可以访问url中不同的片段信息

  • href 返回当前加载页面的完整URL
  • host 返回服务器名称和端口号(如果有)
  • hostname 返回不带端口号的服务器名称
  • hash 返回URL中的hash(#后面的零或多个字符)
  • port 返回URL中指定的端口号。如果URL中不包括端口号则这个属性返回空字符串
  • protocol 返回页面使用的协议。通常是http:或https:
  • pathname 返回URL中的目录和文件名
  • search 返回URL的查询字符串。这个字符串以问号开头

3、navigator对象:提供了与浏览器有关的信息

navigator对象的属性通常用于监测显示网页的浏览器的类型。每个浏览器中的Navigator对象都有一套自己的属性,以下列出部分属性:

  //每个属性的值根据所用的浏览器的不同而不同
//appName 完整的浏览器名称
document.write(navigator.appName+"<br/>");//Netscape //language 浏览器的主语言
document.write(navigator.language+"<br/>");//zh-CN //onLine 表示是否连接到了因特网
document.write(navigator.onLine+"<br/>");//true //platform 浏览器所在的系统平台
document.write(navigator.platform+"<br/>");//Win64 //userAgent 浏览器的用户代理字符串
document.write(navigator.userAgent+"<br/>");//Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0

4、screen对象:保存着与客户端显示器(屏幕)有关的信息

screen对象用处不大,基本上只用来表示客户端的能力,其中包括浏览器窗口外部的显示器的信息,如像素宽度和高度等。以下列出部分属性:

 //每个属性的值根据所用的设备不同而不同
//availHeight 屏幕的像素高度减系统部件高度之后的值
document.write(screen.availHeight);// //height屏幕的像素高度
document.write(screen.height);// //availWidth屏幕的像素宽度减系统部件宽度之后的值
document.write(screen.availWidth);// //width屏幕的像素宽度
document.write(screen.width);// //colorDepth用于表示颜色的位数
document.write(screen.colorDepth);//

5、history对象:保存着用户上网的历史记录

go()方法可以在用户的历史记录中任意跳转
  history.go(-1);//后退一页
  history.go(1);//前进一页
  history.go(2);//前进两页

back()方法模拟浏览器的“后退”按钮

  history.back();//后退一页

forward()方法模拟浏览器的“前进”按钮

  history.forward();//前进一页

history也不常用,在创建自定义的“后退”和“前进”按钮时经常使用到。

history还有个length属性,保存着历史记录的数量。当页面的URL改变时,就会生成一条历史记录。

BOM(浏览器对象模型)的一些操作的更多相关文章

  1. 第一百一十一节,JavaScript,BOM浏览器对象模型

    JavaScript,BOM浏览器对象模型 学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM ...

  2. JavaScript——BOM(浏览器对象模型),时间间隔和暂停

    BOM(浏览器对象模型):能够对浏览器的窗体进行訪问和操作 1.主要的BOM体系: window------------document-------------------------------- ...

  3. BOM浏览器对象模型

    访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model). BOM整体对象图. 核心是window对象: 以下有特殊双重身份: window对象既是ECMAScr ...

  4. javascript之BOM浏览器对象模型引入

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. js BOM浏览器对象模型

    BOM即Browser Object Model,浏览器对象模型,表示浏览器窗口,所有js全局对象.函数以及变量均是window 对象的成员. 对于不同的浏览器,表示宽度和高度的方法不同: 对于IE9 ...

  6. JavaScirpt(JS)——BOM浏览器对象模型

    一.BOM概念 BOM(Browser Object Model)即浏览器对象模型.可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关 ...

  7. JavaScript(二、BOM 浏览器对象模型)

    一.BOM是什么 BOM是browser object model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心 ...

  8. BOM—浏览器对象模型(Browser Object Model)

     1,javascript   组成部分: 1.ECMAscript(核心标准):    定义了基本的语法,比如:if for 数组 字符串 ... 2.BOM  : 浏览器对象模型(Browser ...

  9. JS第三部分--BOM浏览器对象模型

    一.client系列:宽高边框 二.offset系列:偏移 三.scroll系列 四.BOM的介绍 4.1.打开新窗口 4.2.location对象(本地信息对象) 4.3.history对象 4.4 ...

  10. BOM——浏览器对象模型(Browser Object Model)

    什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...

随机推荐

  1. UCS业务知识介绍

    企业融合网关是集路由.交换.防火墙.VPN.IP PBX等功能于一体的综合性设备,满足企业语音.数据.网络安全等业务需求. UCS融合网关设备则是设备厂商在企业融合网关的基础上进一步提出的融合通信设备 ...

  2. 夏令营讲课内容整理Day 0.

    今年没有发纸质讲义是最气的.还好我留了点课件. 第一次用这个估计也不怎么会用,但尝试一下新事物总是好的. 前四天gty哥哥讲的内容和去年差不多,后三天zhn大佬讲的内容有点难,努力去理解吧. 毕竟知识 ...

  3. 携程Apollo(阿波罗)配置中心用户管理和部门管理

    Apollo是配置管理系统,会提供权限管理(Authorization),理论上是不负责用户登录认证功能的实现(Authentication).所以Apollo定义了一些SPI用来解耦,Apollo接 ...

  4. Rsync(远程同步): linux中Rsync命令的实际示例

    rsync的 ( 远程同步 )为在Linux / Unix系统局部 拷贝和同步文件和目录远程以及一个最常用的命令. 随着rsync命令的帮助,您可以复制并在目录中远程和本地同步数据,在磁盘和网络,进行 ...

  5. 940C Phone Numbers

    传送门 题目大意 给你两个数字n和k,给你一个字符串s,n是s的长度,求字母集合是s的字母集合子集的字典序大于s的长度为k的字典序最小的字符串t 分析 将字符转化为数字,然后分两种情况处理: 1.n& ...

  6. iOS实现微信外部H5支付完成后返回原APP

    看到微信最近放开了微信H5支付,公司决定把H5集成到多款APP上.下面记录下了开发过程. 由于是微信新推出的支付方式,在网上搜索到的相关资料并不多,其中有一篇文件(点此跳转)对我的整个开发过程起到了很 ...

  7. C# decimal 去掉小数点后的无效0

    c#去掉小数点后的无效0 decimal d = 0.0500m; d.ToString("0.##")就出来了 也可以这样 string.Format("{0:0.## ...

  8. mac中配置jdk环境

  9. Python基础——for/while循环

    Python版本:3.6.2  操作系统:Windows  作者:SmallWZQ 上学期间,常常遇到这样的情景:为了惩罚学生,老师会说:"XXX,你先去操场上跑10圈再回来继续反省.&qu ...

  10. Yii2-admin的详细使用教程

    Yii2-admin的详细使用教程 参考:http://www.yiichina.com/tutorial/571    http://www.kancloud.cn/curder/yii/24775 ...