您的位置:首页 > Web前端 > JavaScript

JavaScript学习笔记之BOM

2015-05-12 21:17 344 查看
BOM是JavaScript三大核心概念之一,其余两个分别为DOM和ECMAScript。BOM提供了很多对象,用于访问浏览器的功能,这些功能与网页内容无关。

window对象

window对象是BOM的核心对象,他表示浏览器的一个实例。在浏览器中,它既是通过JavaScript访问浏览器窗口的一个接口(BOM相关),又是ECMAScript规定的Global对象(ECMAScript相关)。这意味着网页中定义的任何一个对象、变量和函数,都以window作为其Global对象。

1、全局作用域

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

2、窗口与框架

如果页面中包含框架,每个框架都有自己的window对象,并保存在frames集合中。window对象拥有top,parent属性(window.top,window.parent),分别指向顶层框架和父级框架。

3、窗口位置

//IE,Safari,Opera,Chrome

screenLeft:窗口相对于屏幕左边的位置;

screenTop:窗口相对于屏幕上边的位置;

//Firefox

screenX,screenY;

注:上面的属性在不同浏览器中表示的意思有所不同,因此无法在跨浏览器条件下取得窗口左边和上边的精确坐标值。

moveTo():移动到参数位置

moveBy():在水平和垂直方向上移动参数的距离

4、窗口大小

浏览器窗口相关属性:innerWidth,innerHeight,outerWidth,outerHeight

页面视口大小的相关属性:

document.documentElement.clientWidth,document.documentElement.clientHeight      //IE,Firefox,Safari,Opera,Chrome

document.body.clientWidth,document.body.clientHeight        //IE6

resizeTo():调整参数大小;

resizeBy():调整参数大小;

5、打开新窗口

open():打开一个新窗口,可以同时对新窗口的URL,窗口目标,浏览器信息等进行设置,返回一个新建的window对象。该对象拥有opener属性,指向打开他的原始窗口。

6、间歇调用和超时调用

JavaScript是单线程语言,但他允许通过设置超时值和间歇时间值来调度代码在特点的时刻执行。

一、超时调用,setTimeOut(),表示经过指定时间执行指定函数:

setTimeOut(function(){
alert("a");
},1000);这个方法会有一个添加到队列的过程,所以时间可能有所偏差。
二、间歇调用,setInterval(),表示每隔指定时间执行一次指定函数,并返回一个调用ID:

var id=setInterval(function(){
alert("a");
},1000);对于间歇调用,由于它会一直循环执行调用函数,所以在需要的时候要调用clearInterval()方法并传入一个调用ID来停止函数执行。
clearInterval(id);7、系统对话框
alert(),confirm(),prompt()

location对象

location对象提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。另外,location将URL解析为独立的片段,对应着不同的属性。

1、URL片段属性

包括hash,host,hostname,href,pathname,port,protocol,search。

2、位置操作

location.assign(URL),效果等同于window.location=URL和location.href=URL,用于跳转到指定URL页面。

replace():加载指定页面且不留历史记录

reload():重新加载页面,如果有参数true,则强制从服务器加载。

navigator对象

navigator对象用于检测浏览器的相关信息,最常见的一个是插件的检测。

1、插件检测

plugins数组,其中每一项都包含下列属性

name:插件的名字

description:插件的描述

filename:插件的文件名

length:插件所处理的MIME类型数量

在IE中,使用新建一个ActiveXObject类型来判断是否有指定类型的插件。

screen对象

用处不大

history对象

保存用户的上网记录。history是window对象的属性,每个窗口、标签页或者框架都有自己的history对象。

go():跳转到指定的页面,用数字表示前进和后退的页数;

back():后退一页;

forward():前进一页
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  javascript BOM