一个完整的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. 《Thinking in Java》学习笔记(一)

    服务器端的编程可以参考另一本书<企业Java编程>(Thinking in Enterprise Java). 1.基本类型 基本型别 大小 最小值 最大值  默认值 boolean -- ...

  2. HDU2089 不要62 BZOJ1026: [SCOI2009]windy数 [数位DP]

    基础题复习 这次用了dfs写法,感觉比较好 #include <iostream> #include <cstdio> #include <cstring> #in ...

  3. Ling && Lambda

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. Java并发(一)——线程安全的容器(上)

    Java中线程安全的容器主要包括两类: Vector.Hashtable,以及封装器类Collections.synchronizedList和Collections.synchronizedMap: ...

  5. 小笔记:Timer定时间隔时间操作

    小笔记:Timer定时间隔时间操作,后面有时间再补充和完善: public class TimingSvc { /// <summary> /// 定时器,执行定时任务 /// </ ...

  6. 好用的Google漏洞爬虫:Google Mass Explorer

    这是一款基于谷歌搜索引擎的自动化爬虫. 爬虫介绍 爬虫大体机制就是: 先进行一次谷歌搜索,将结果解析为特定格式,然后再提供给exp使用. 大家可以尝试使用–help来列出所有参数. 这个项目笔者会持续 ...

  7. zabbix 网络模板自动发现端口时,过滤掉某些特定规则的端口,减少item的方法

    1.需求描述        默认情况下Zabbix 模板 中网络接口自动发现接口时,会产生很多item,有时候会有我们不需要的一些接口,这时候需要过滤掉他们.        比如我有一台运行kvm的服 ...

  8. android应用中去android市场去评分的功能实现(吐槽一波个人应用上线...)

    一般的app可能会有这中功能,在应用中去android商店评分来提高排名,前段时间也把我的博客园上传到商店,这里不得不吐槽一些android商店的开放平台. 酷派,vivo,oppo,联想不支持个人开 ...

  9. 获取对象属性类型、属性名称、属性值的研究:反射和JEXL解析引擎

    同步发布:http://www.yuanrengu.com/index.php/20170511.html 先简单介绍下反射的概念:java反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所 ...

  10. ASP.NET Core的身份认证框架IdentityServer4--(4)添加第三方快捷登录

    添加对外部认证的支持 接下来我们将添加对外部认证的支持.这非常简单,因为你真正需要的是一个兼容ASP.NET Core的认证处理程序. ASP.NET Core本身也支持Google,Facebook ...