一个完整的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. 使用exe4j工具制作简单的java应用程序

    首先需要下载exe4j工具并进行安装,下面是利用exe4j工具制作应用程序的步骤. 1.首先将工程导出为可运行的jar包,选择extract required libralies into gener ...

  2. js实现点击切换显示隐藏,点击其它位置再隐藏

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

  3. 安装基于 Linux 发行版的重要事项(流程指引)

    安装基于 Linux 发行版的重要事项(Install important issues based on the Linux distribution. (Process guidance)) 1. ...

  4. centos 7 双网卡建网桥脚本实现

    #!/bin/bash interface1=`ls /sys/class/net|grep en|awk 'NR==1{print}'` interface2=`ls /sys/class/net| ...

  5. C控制语句:循环

    #include<stdio.h>int main(void){long num;long sum = 0L;int status; printf("Please enter a ...

  6. os模块中关于文件/目录常用的函数使用方法

    os模块中关于文件/目录常用的函数使用方法 函数名 使用方法 getcwd() 返回当前工作目录 chdir(path) 改变工作目录 listdir(path='.') 列举指定目录中的文件名('. ...

  7. web自动化一(selenium+python+pycharm环境搭建)

    年前公司刚刚搭起了web自动化测试框架的环境,趁着过完年还没全部忘掉,准备把如何搭建环境的方法和大家分享下,有哪里不对的地方,请批评指正,共同进步,共勉! 为此我把搭建环境所需的软件打包上传到百度云, ...

  8. TripleDES加密解密

    参考:http://www.cnblogs.com/chnking/archive/2007/08/14/855600.html 参考:http://blog.csdn.net/change_from ...

  9. Java常见加密算法

    常见 package com.example.decript; import java.io.UnsupportedEncodingException; import java.security.In ...

  10. 网络基础tcp/ip协议二

    物理层解析: 物理层是TCP/IP模型的最低层,物理层为数据提供数据传输可靠通路. 物理层关心的介质: 信号 接口 传输介质 信号的分类:(信号是信息传递的媒介.) 模拟信号:连续变化的物理量 数字信 ...