国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > htmlcss > js笔记--BOM编程

js笔记--BOM编程

来源:程序员人生   发布时间:2016-07-29 16:07:21 阅读次数:2297次

1.window对象

BOM的核心对象是window,它表示阅读器的1个实例。在阅读器中,window对象具有两重角色。它既是通过JS访问阅读器窗口的1个接口,又是ECMAScript规定的Global对象。所以网页中定义的任何1个对象,变量和函数,都以window作为其Global对象。

1.全局作用域

所有在全局作用域中声明的变量,函数都会编程window对象的属性和方法。但是定义全局变量和直接在window对象上定义属性还是有区分的:全局变量不能通过delete操作符删除,但是直接在window对象上定义的属性可以。

var name = "zhangsan"; window.color = "red"; console.log(delete window.name);//fasle console.log(delete window.color);//true

chrome中全为true

注意:尝试访问未声明的变量会抛错,但是通过window对象查找,可以知道某给可能未声明的变量是不是存在 。

//var newValue = oldValue; 报错 var newValue1 = window.oldValue; console.log(newValue1); //undefined

2.窗口关系及框架

如果页面中包括框架,则每一个框架都具有自己的window对象,并且保存在frames集合中。可以通过数值索引(从0开始,左至右,上到下),或框架名称来访问相应的window对象。每一个window对象都有1个name属性,其中包括框架的名称。
<frameset rows="160,*"> <frame src="top.html" name="topFrame"> <frameset cols="50%,50%"> <frame src="left.html" name="leftFrame"> <frame src="right.html" name="rightFrame"> </frameset> </frameset>

window.frames["topFrame"]

top.frames["topFrame"]

top对象始终指向最高(外)层的框架,也就是阅读器窗口。

parent对象始终指向当前框架的直接上层框架。某些情况下parent可能等于top

注意:除非最高层窗口是通过window.open()打开的,否则window对象的name属性不会包括任何值。

self对象:始终指向window;self和window对象可以互换使用。(引入self对象的目的只是与top和parent对应,不格外包括其他值)

所有上面的这些属性都是window对象的属性,可以通过window.parent,window.top来访问。

注意:在使用框架的情况下,阅读器中会存在多个Global对象。在每一个框架中定义的全局变量会自动成为框架中window对象的属性。由于每一个window对象都包括原生类型的构造函数,因此每一个框架都有1套自己的构造函数,这些构造函数逐一对应,但其实不相等。如:top.Object不等于top.frames[0].Object。这个问题会影响到对跨框架传递的对象使用instanceof操作符。

3.窗口位置

IE,Safari,Opera和Chrome提供了  screenLeft和screenTop属性。Firefox提供screenX和screenY属性。
跨阅读器获得窗口左侧和上边的位置。 
var leftPos = (typeof window.screenLeft == "number")?window.screenLeft:window.screenX; var topPos = (typeof window.screenTop == "number")?window.screenTop:window.screenY; console.log(leftPos+" "+topPos);

调剂窗口位置和大小

window.moveTo(0,0);//窗口移动到屏幕左上角 window.moveBy(0,100);//窗口向下移动100像素 window.resizeTo(100,100);//调剂窗口大小 window.resizeBy(100,50);//调剂到200*150

4.导航和打开窗口

var topFrame = window.open("top.html","topFrame","height=400,width=300,top=10,left=20"); console.log(topFrame); topFrame.close();

5.间歇调用和超时调用

JS是单线程语言,但允许通过设置超时时间和间歇时间来调度代码在特定的时刻履行。前者是在指定的时间后履行代码,后者是每隔指定时间履行1次。
var id = setTimeout(function(){ //1秒后履行 alert("hehe"); },1000); clearTimeout(id);
第2个参数表示等待多长时间的毫秒数,但经过该时间后指定的代码不1定会履行。JS是1个单线程序的解释器,因此1定时间内只能履行1段代码。为了控制要履行的代码,就有1个JavaScript任务队列。这些任务将会依照它们添加到队列的顺序履行。setTimeout()表示指定时间后,将该任务添加到履行队列中。如果队列是空的,就会立刻履行;如果队列不是空的,就要等到前面的代码履行完了以后再履行。
方法返回1个数值ID,表示这个超时调用。可以通过它来取消超时调用。clearTimeout()方法取消超时调用。
var num = 0; var max = 10; var intervalId = null; function incrementNumber(){ num++; if(num == max){ clearInterval(intervalId); console.log("Done"); } } intervalId = setInterval(incrementNumber,500);

使用setTimeout()实现间歇调用

var num = 0; var max = 10; var intervalId = null; function incrementNumber(){ num++; if(num < max){ console.log(num); setTimeout(incrementNumber,500); }else{ console.log("done"); } } intervalId = setTimeout(incrementNumber,500);
在使用超时调用时,不需要跟踪超时调用ID,由于每次履行代码后,如果不再设置另外一次超时调用,调用就会停止。1般认为使用超时调用来摹拟间歇调用是1种最好模式。由于后1个间歇调用可能会在前1个间歇调用结束前启动,为了不这个,最好不要使用间歇调用。

6.系统对话框

阅读器通过alert(),confirm()和prompt()方法可以调用系统对话框向用户显示消息。系统对话框与在阅读器中显示的网页没有关系,也不包括HTML。它们的外观由操作系统及阅读器设置决定,而不是CSS决定。并且通过这几个方法打开的对话框都是同步和模态的。也就是说,显示这些对话框的时候代码会停止履行,而关掉这些对话框后代码又会回复履行。
var flag = confirm("are you sure?"); console.log(flag); console.log(prompt("name","zhangsan"));
prompt()如果点击的取消或没有点击肯定而是通过其他方式关闭了对话框,则该方法返回null。

2.location对象

location是最有用的BOM对象之1,它提供了与当前窗口中加载的文档有关的信息,还提供了1些导航功能。location对象是很特别的1个对象,由于它既是window对象的属性,也是document对象的属性;换句话说,window.location和document.location援用的是同1个对象。location对象的用途不只表现在它保存着当前文档的信息,还表现在它将URL解析为独立的片断,让开发人员可以通过不同的属性访问这些片断。
hash "#contents"返回URL中的hash(#后跟零或多个字符),如果URL中不包括散列,则返回空字符串
console.log(location.hash) console.log(location.host);//服务器名和端口号 console.log(location.hostname);//服务器名 console.log(location.href);//完全的URL,location.toString() console.log(location.pathname);//URL中的目录和文件名 console.log(location.port);//URL中指定的端口号,如果没有返回空字符串""。 console.log(location.protocol);//返回页面使用的协议。http或https console.log(location.search); //返回从?到URL末尾的所有内容

1.查询字符串参数

虽然通过上面的属性可以访问到location对象的大多数信息。但却没办法逐一访问其中的每一个查询字符串参数。
function getQueryStringArgs(){ //获得查询参数?以后的值 var qs = location.search.length>0?location.search.substring(1):""; args = {};//参数对象 //获得每项参数 var items = qs.length?qs.split("&"):[]; //遍历每项 items.forEach(function(item){ if(item.length){ var keyValue = item.split("="); var name = decodeURIComponent(keyValue[0]); var value = decodeURIComponent(keyValue[1]); if(name.length){ args[name] = value; } } }); return args; } console.log(getQueryStringArgs());

2. 位置操作

使用location对象可以通过很多方式来改变阅读器的位置。首先,也是最经常使用的方式,就是使用assign()方法并为其传递1个URL。

location.assign("http://www.baidu.com"); window.location = "http://www.baidu.com";//调用的location.assign() location.href = "http://www.baidu.com";

通过设置location对象的其他属性值hash,search,hostname,pathname和port来改变URL。

修改后阅读器历史记录中会生成1条新记录,因此用户通过单击"后退"按钮会导航到前1个页面。可使用replace()方法禁用这类行动。这个方法只接受1个参数,即要导航到的URL;结果虽然会致使阅读器位置改变,但不会在历史记录中生成新记录。在调用replace()方法后,不能回到前1个页面。

<html> <head> <title>BOM对象</title> </head> <body> hello,没法返回! </body> <script> setTimeout(function(){ location.replace("http://www.baidu.com"); },1000); </script>

reload()方法:重新加载当前显示的页面。如果不传递任何参数,页面就会以最有效的方式重新加载。即如果页面自上次要求以来并没有改变过,页面就会从阅读器缓存中重新加载。如果要强迫从服务器重新加载,则需要像下面这样为该方法传递参数true。

location.reload(); //重新加载,有可能重阅读器缓存中加载 location.reload(true); //重新加载(从服务器加载)

位于reload()调用以后的代码,可能不会被履行(取决于网络延迟或系统资源等因素),最好将reload()放在代码最后面。

3.navigator对象

最早由Netscape Navigator2.0引入的navigator对象,现在已成为辨认客户端阅读器的事实标准。navigator对象是所有支持JavaScript的阅读器所共有的。与其他BOM对象的情况1样,每一个阅读器中的navigator对象也都有1套自己的属性。

1.检测插件

检测阅读器中是不是安装了特定的插件是1种最多见的检测例程。对非IE阅读器可使用plugins数组来到达这个目的。数组属性:
name:插件名
description:插件的描写
filename:插件文件名
length:插件所处理的MIME类型数量
1般name属性中会包括检测插件必须的所有信息。(通过name属性来检测)
//检测插件(IE中无效) function hasPlugin(name){ name = name.toLowerCase(); for(var i =0;i<navigator.plugins.length;i++){ if(navigator.plugins[i].name.toLowerCase().indexOf(name) > ⑴){ return true; } } return false; } console.log(hasPlugin("Flash")); //true console.log(hasPlugin("QuickTime"));//false
每一个插件对象本身也是1个MimeType对象的数组,这些对象可以通过方括号语法来访问。每一个MimeType对象有4个属性:包括MIME类型描写的description,回指插件对象的enabledPlugin,表示与MIME类型对应的文件扩大名的字符串suffixes和表示完全MIME类型字符串的type。

4.screen对象

screen对象基本上只用来表明客户真个能力,包括阅读器窗口外部的显示器的信息,如像素宽度和高度等。
window.resizeTo(screen.availWidth,screen.availHeight);

5.history对象

history对象保存这用户上网的历史记录,从窗口被打开的那1刻算起。由于history是window对象的属性,因此每一个阅读器窗口,每一个标签页乃至每一个框架,都有自己的history对象与特定的window对象关联。出于安全方面的斟酌,开发人员没法得知用户阅读过的URL。不过,借由用户访问过的页面列表,可以实现后退和前进。
go():实现用户在历史记录中任意跳转。
//后退1页 history.go(⑴); //前进1页 history.go(1); //前进两页 history.go(2);
跳转到历史记录中包括该字符串的第1个位置,可能后退也可能前进,具体看哪一个位置最近。如果历史记录中不包括这个字符串,就甚么也不做。
history.go("baidu"); history.back(); history.forward();
history对象还有1个length属性,保存这历史记录的数量,如果为0,表示这是第1个打开的页面。
if(history.length == 0){ //这是第1个打开的页面 }





























生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
为码而活
积分:4237
15粉丝
7关注
栏目热点
关闭
程序员人生