JS高级程序设计——BOM

xiaoxiao2021-02-28  93

window 对象

全局作用域

所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。虽然有上述说法,但是定义全局变量与在window对象上直接定义属性还是有一点差别:全局变量不能通过delete操作符删除,而直接在window对象上的定义的属性可以。因为用var语句添加的window属性有一个[[Configurable]]的特性,值被设置为false。尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个可能未声明的变量是否存在。

窗口关系及框架

如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中。每个window对象都有一个name属性,包含框架的名字。 除非最高层窗口是通过window.open()打开的,否则其在window对象的name属性不会包含任何值。top对象始终指向最高(外)层的框架,也就是浏览器窗口。parent对象始终指向当前框架的直接上层框架。在没有框架的时候,parent==top。self对象始终指向window。 <html> <head> </head> <frameset rows="100,*"> <frame src="frame.htm" name="topFrame">//window.name=topFrame <frameset cols="50%,50%"> <frame src="anotherframe.htm" name="leftFrame"> //可由window.frames[1]、window.frames["leftFrame"]、top.frames[1]、top.frames["leftFrame"]、frames[1]、frames["leftFrame"]来引用 <frame src="anotherframeset.htm" name="rightFrame">//这个框架包含了下述的框架集 </frameset> </frameset> </html> <frameset cols="50%,50%"> <frame src="red.htm" name="redFrame">//parent.name=rightFrame <frame src="blue.htm" name="blueFrame"> </frameset>

窗口位置

确定位置:

screenLeft、screenTop属性:IE、Safari、Opera、Chrome

screenX、screenY属性:Firefox

var leftPos=(typeof window.screenLeft=="number")?window.screenLeft:window.screenX; var topPos=(typeof window.screenTop=="number")?window.screenTop:window.screenY;精确移动位置 moveTo()接收的是新位置的x、y坐标值。moveBy()接收的是向右、下移动的像素数。这两个方法都不适用于框架,只能对最外层的window对象使用。

窗口大小

确定大小

outerWidth和outerHeight在IE9、Safairi和Firefox中返回浏览器本身的尺寸。在Opera中,这两个属性表示页面视图容器的大小,而innerWidth和innerHeight则表示该容器页面视图区的大小(减去边框宽度),在Chrome中,返回相同的值。IE、在Opera、Chrome、Safairi和Firefox中,document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面视口的信息,在IE6中,这些在标准模式下才有效,如果是混杂模式,就必须通过document.body.clientWidth和document.body.clientHeight属性。 var pageWidth=window.innerWidth; var pageHeight=window.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; }//混乱模式下 }调整大小 resizeTo()接收浏览器窗口的新宽度和新高度。resizeBy()接收新窗口与原窗口的宽度和高度之差。这两个方法都不适用于框架,只能对最外层的window对象使用。

导航和打开窗口

window.open()使用 window.open(要加载的URL,窗口目标,一个特性字符串,表示新页面是否取代浏览器历史记录中当前加载页面的布尔值)。该方法既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。返回指向新窗口的引用。通常只需传递第一个参数。如果传递了第二个参数,而且该参数是已有窗口或框架的名称,那么就会在具有该名称的窗口或框架中加载第一个参数URL。如果第二个参数并不存在,则会根据第三个参数创建一个新窗口或者新标签页,如果没有第三个参数,则默认打开一个新浏览器窗口。第三个参数是以逗号分隔的名值对。有关 新创建的window对象有一个opener属性,保存着打开它的原始窗口对象。这个属性只在弹出窗口中的top层有定义。如果需要浏览器在独立的进程中运行每个标签页,需要将新创建的opener属性设置为null,即表示在单独的进程中运行新标签页。

弹出窗口屏蔽程序

如果是浏览器内置的屏蔽程序阻止的弹出窗口,那么window.open()很可能会返回null;如果是其他程序组织的,window.open()会抛出一个错误。 var blocked=false; try{ var wrox=window.open("http://www.wrox.com","_blank"); if(wrox==null){ blocked=true; } } catch(ex){ blocked=true; }//try catch 表示当try中语句抛出错误时执行catch if(blocked){ alert("the popup was blocked"); }

间歇调用和超时调用

超时调用

表示在指定的时间过后执行代码。setTimeout(要执行的代码,等待时间)第一个参数因为可能导致性能损失,所以建议函数。第二个参数表示过多长时间把当前任务添加到任务队列中,如果队列为空则立即执行,如果不为空,则需等待。setTimeout()的返回值,是超时调用ID,是计划执行代码的唯一标识符,可以将它传给clearTimeout()来取消尚未执行的超时调用计划。 var timeID=setTimeout(function(){ alert("hello"); },1000); clearTimeout(timeID);间歇调用 表示每隔一段时间执行一次代码。setInterval()使用与上述差不多。可以使用clearInterval(timeID)来取消。使用超时调用来模拟间歇调用是一种最佳模式。

系统对话框

alert():警告对话框,包含传入的字符串和确定按钮。confirm():确认对话框,还显示了取消按钮。点击确定返回true,否则返回false。prompt():提示框,用于提示用户输入一些文本,会显示一个文本输入框。接收两个参数:要显示给用户的文本提示和文本输入域的默认值(可为空)。会返回用户输入的值,如果没有输入,则返回null。如果当前脚本在执行过程中会打开2个或2个以上的对话框,从第2个开始之后会显示一个复选框,以便用户组织后续的对话框显示,除非用户刷新页面。

location对象

提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。既是window对象的属性,也是document对象的属性。它还将URL解析为独立的片段,可以通过不同的属性访问这些片段。location对象的所有属性: hash:返回#后跟0或多个字符,”#contents” host:返回服务器名称和端口号,”www.wrox.com:80” hostname:返回不带端口号的服务器名称,”www.wrox.com” href:返回完整的URL,tostring()方法也返回这个,”http:/www.wrox.com” port:返回端口号,如果没有返回空字符串,”8080” pathname:返回URL中的目录和文件名,”/WileyCDA” protocol:返回页面使用的协议,”http:” search:返回URL的查询字符串,以问号开头,”?q=javascript” 名值对

查询字符串

下面这个函数可以解析查询字符串,返回一个包含所有名值对的对象。 function getsearch(){ var qs=(location.search.length>0?location.search.substring(1):""); args={}; items=qs.length?qs.split("&"):[]; item=null; name=null; value=null; for(var i=0;i<items.length;i++){ item=items[i].split("="); name=decodeURLComponent(item[0]);//因为查询字符串应该是被编码过的,所以需要解码 value=decodeURLComponent(item[1]); if(name.length){ args[name]=value; } } return args; } //假设查询的字符串是?q=javascript&num=10 var args=getsearch(); alert(args["q"]);//javascript alert(args["num"]);//10

位置操作

通过一些方式来改变浏览器的位置

location.assign(“URL”);//打开新URL并生成一条历史纪录。window.location=”URL”等同于location.href=”URL”等同于上述。location.hash=”#section1”;//更改hash部分location.searchlocation.hostnamelocation.pathnamelocation.port以上方式都相同,且都会在历史纪录中生成一条新纪录。如果不想生成新记录,可以使用replace(“URL”)方法,这样之后用户是不能通过“后退”来回到前一个页面。reload()重新加载页面,位于这之后的代码可能不会执行,所以最好这行代码放到最后。 location.reload();//有可能从缓存中加载 location.reload(true);//从服务器重新加载

navigator对象

是识别客户端浏览器的事实标准 。navigator对象的属性通常用于检测显示网页的浏览器类型。

检测插件

非IE的浏览器使用plugins数组。数组中的每一项都包含四个属性:name(插件的名字),description(插件的描述),filename(插件的文件名),length(插件所处理的MIME类型数量)。 function hasPlugin(name){ name=name.toLowerCase();//转入小写形式便于比较 for(var i=0;i<navigator.plugins.length;i++){ if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){ return true; } } return false; } alert(hasPlugin("Flash")); 对于IE浏览器,只能使用ActiveObject类型,并尝试创建一个特定插件的实例,要想检测特定的插件,就必须知道其COM标识符。比如,Flash的标识符是ShockwaveFlash.ShockwaveFlash。 function hasIEPlugin(name){ try{ new ActiveObject(name); return true; }catch(ex){ return false; } } alert(hasIEPlugin("ShockwaveFlash.ShockwaveFlash")); 典型的做法是针对每个插件分别创建检测函数,而不是使用前面的通用检测方法。 function hasFlash(){ var result=hasPlugin("Flash"); if(!result){ result=hasIEPlugin("ShockwaveFlash.ShockwaveFlash"); } return result; } alert(hasFlash()); plugins集合有一个名叫refresh()的方法,用于刷新plugins以反映最新安装的插件,参数为布尔值,true表示重新加载页面,更新集合;flase表示不加载页面,只更新集合。

注册处理程序

可以让一个站点指明它可以处理特定类型的信息

registerContentHandle();接收三个参数:要处理的MIME类型,可以处理该MIME类型的页面URL,应用程序的名称。registerProtocolHandler();接收三个参数:要处理的协议,处理该协议的页面URL,应用程序的名称。

screen对象

表明客户端的能力,包括浏览器窗口外部的显示器的信息,如像素宽度和高度等

history对象

该对象保存着用户上网的历史纪录,从窗口被打开的那一刻算起

因为history是window对象的属性,因此每个浏览器窗口、每个标签页乃至每个框架,都有自己的history。go()方法 history.go(1);//前进一页 history.go(2);//前进2页 history.go(-1);//后退1页 history.go("wrox.com");//跳转到历史纪录中最近的包含wrox.com字符串的第一个位置 back()和forward()后退和前进一页history.length()保存着历史纪录的数量
转载请注明原文地址: https://www.6miu.com/read-96727.html

最新回复(0)