JavaScript学习笔记之BOM

BOM的核心对象是window,它既表示浏览器窗口以及页面可见区域,同时也是ECMAScript中的Globe对象,所有的全局变量和函数都是它的属性,并且所有的原声函数以及其他函数也都存在于它的命名空间下。

一,window窗口相关设置

1)获取浏览器窗口在显示屏的位置

根据浏览器不同,可以采用screenLeft,screenTop或者screenX,screenY,跨浏览器的代码如下:

//获取浏览器的位置
var leftPos=(typeof window.screenLeft ==‘number‘)?window.screenLeft:window.screenX;
var topPos=(typeof window.screenTop ==‘number‘)?window.screenTop:window.screenY;

2)移动浏览器窗口的位置

moveTo,moveBy.不过该方法一般浏览器是禁用的

3)获取浏览器窗口大小,以及浏览器页面视口的大耵浏览器窗口的大小

不同浏览器的实现方法不同,最终无法确定浏览器窗口本身的大小,但是可以取得页面视口的大小

//获取浏览器视口的位置
var pageWidth=document.innerWidth;
var pageHeight=document.innerHeight;
if(typeof pageWidth!="number"){
    if(document.compatMode=="CSS1Compat"){
        pageWidth=document.documentElement.clientWidth;
        pageHeight=document.documentElement.clientHeight;
    }else{
        pageWidth=document.body.clientWidth;
        pageHeight=document.body.clientHeight;
    }
}
alert(pageWidth+","+pageHeight);

4)调整浏览器窗口大小

可以利用resizeTo()和resizeBy()两个方法,不过这个方法一般也是被禁用的。

二、window相关的全局对象

1.location对象

1)location即是window的属性,也是document的属性,代表当前页面的访问地址

2)locaiton可以通过host,href,pathname,protocol,search等属性,访问当前url地址的相关字段

3)location可以改变当前的访问地址。多采用location.href="新地址"

4)location.reload()重新加载页面

2.navigation对象

代表浏览器应用,可以查询浏览器的版本,名称等。在实际中应用不多。

3.history对象

该对象保存着用户的上网历史,history.go(-n),history.go(n),如果仅仅前进/后退一步,可以使用back(),forward(),来模仿浏览器的前进/后退操作。

三、window相关的全局函数

1.Math,Date等对象提供的相关工具函数

2.window.open()弹出框函数,该方法可以导航到一个特定的url,可以打开一个新的浏览器窗口,接受四个参数,URL,窗口目标,一个特性字符串("_self,_blank,_parent等"),以及是否在浏览器历史记录中记录当前加载页面的布尔值。有些时候,弹出窗会受限于浏览器的安全限制。

3.间歇调用和超时调用

setTimeOut():接受两个参数,函数以及经过多长时间后该函数被调用

setInterVal():接受两个参数,函数以及每间隔多长时候该函数被调用一次

4,系统相关对话框

alert(),confirm(),prompt()

这几个对话框的外观由浏览器决定,而不是由css决定,同时,这些对话框都是同步和模态的,也就是说,显示这些对话框的时候,代码会停止运行,直到关闭这些对话框。

时间: 2024-10-11 03:33:02

JavaScript学习笔记之BOM的相关文章

JavaScript学习笔记——7.BOM(浏览器对象模型)

1.定义 浏览器本身就具有一些对象,不用进行创建即可使用 2.window对象中的方法 alert() //弹框 confirm() //确认 onclick="return confirm('你确定要删除吗?')" setInterval() //定时器 clearInterval() //清除定时器 var timer=setInterval(function(){},1000);//设置定时器 clearInterval(timer); //清除定时器 setTimeout()

Javascript 学习笔记 2: 标识语句

可以在任何语句声明之前使用唯一标识(identifier)和冒号(:)用来标记该语句: identifier: statement 这样,你可以在程序的任何其他地方通过标识来使用这个语句.即使在语句内部也可以使用该语句的标识(例如:循环语句和条件语句).当在一个循环语句前添加一个标识,你可以在语句内部通过break 标识来退出当前循环,也可以通过continue标识来继续执行该语句.例如: mainloop: while(token != null) { // Code omitted... c

javascript学习笔记---ECMAScript-判断变量类型

判断类型之前,先要清楚有哪些类型. (理理思路:程序由数据和方法构成,数据由简单数据和复杂数据构成) 即类型有: 数据(简单数据:boolean,string,num,undefined,null.复杂数据:object), 方法(function) 万能的typeof,神一样的方法 typeof(1);// num typeof("hello");// string   typeof(false);// boolean var vFlag; typeof(vFlag);// unde

javascript学习笔记---ECMAScript语法(引用类型)

引用类型通常叫做类(class). 本教程会讨论大量的 ECMAScript 预定义引用类型. 引用类型 引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象. 本教程会讨论大量的 ECMAScript 预定义引用类型. 从现在起,将重点讨论与已经讨论过的原始类型紧密相关的引用类型. 注意:从传统意义上来说,ECMAScript 并不真正具有类.事实上,除了说明不存在类,在 ECMA-262 中根本没有出现"类"这个词.ECMAScript 定义了"对象定

javascript学习笔记---ECMAScriptECMAScript 对象----定义类或对象

使用预定义对象只是面向对象语言的能力的一部分,它真正强大之处在于能够创建自己专用的类和对象. ECMAScript 拥有很多创建对象或类的方法. 原始的方式 因为对象的属性可以在对象创建后动态定义(后绑定),类似下面的代码: var oCar = new Object; oCar.color = "blue"; oCar.doors = 4; oCar.mpg = 25; oCar.showColor = function() { alert(this.color); };不过这里有一

javascript学习笔记---ECMAScriptECMAScript 对象----修改对象

通过使用 ECMAScript,不仅可以创建对象,还可以修改已有对象的行为. prototype 属性不仅可以定义构造函数的属性和方法,还可以为本地对象添加属性和方法. 创建新方法 通过已有的方法创建新方法Number.prototype.toHexString = function() { return this.toString(16); }; 在此环境中,关键字 this 指向 Number 的实例,因此可完全访问 Number 的所有方法.有了这段代码,可实现下面的操作: var iNu

javascript学习笔记——如何修改<a href="#">url name</a>

0.前言 使用了一段时间javascript,再花了点时间学习了jquery,但是总是感觉自己很"迷糊",例如<a href="#">url name</a>中,如果修改href中的"#"应如何编写代码,如果修改url name应如何编写代码.再加上javascript和jquery操作方法略有不同,所以我就更"迷糊"了. [说明] 曾经使用关键词--"innerHTML和value区别&qu

javascript学习笔记---ECMAScript语法(辅助)

1.区分大小写. test与Test变量是两个不同的变量 2.变量是弱变量. 与C,java等等语言变量不是很一样. 如下java代码 ? 1 2 3 4 int i =0; //再次赋值 i = 10;//ok i = "hello";//wrong 类型不匹配 javascript ? 1 2 3 4 var i = 9; //再次赋值 i = 10;//ok i = "hello";//ok 但是不建议这么干,如此会给开发造成干扰,不明确变量的类型.(变量命名

javascript学习笔记---ECMAScript语法(变量)

变量声明关键字var: var i = 1: var t = "asd"; var test1 = "hi", test2 = "hello"; 声明变量不一定要初始化, var i;//ok 另一方面在使用变量前若未加关键字var,则此变量为全局变量(此特性需特别记住). 变量名字: 变量名需要遵守两条简单的规则: 第一个字符必须是字母.下划线(_)或美元符号($) 余下的字符可以是下划线.美元符号或任何字母或数字字符 命名变量规则: Came