《JavaScript高级程序设计》——BOM篇
来源:广州中睿信息技术有限公司官网
发布时间:2012/10/21 23:25:16 编辑:editor 阅读 386
Author:chemandy第8章BOMwindow对象基本概念①window对象既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。②windo

Author:chemandy

 

8 BOM

    1. window对象
      1. 基本概念

window对象既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。

window对象为Global对象的角色,全局作用域中声明的变量,函数都会变成window对象的属性和方法。

      1. 窗口关系及框架

①在使用框架的情况下,浏览器会存在多个Globalwindow)对象。窗体一个,各个框架一个。

②访问框架:window.frames[0]window.frames["framename"}top.frames[0]top.frames["framename"]frames[0]frames["framename"]

建议使用top对象访问,因top对象始终指向最高(最外)层的框架,也就是浏览器窗口。

parent对象始终指向当前框架的直接上层框架。

self对象,它始终指向window,可以与window呼唤。

      1. 窗口位置

属性及方法很多,需考虑各兼容性。

var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;

var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

使用moveTo()moveBy()有可能将窗口精确地移动到新位置(这两方法有可能被禁用)。

      1. 窗口大小

①跨浏览器无法取得窗口大小,只能取得页面视图大小。

var pageWidth = window.innerWidth, pageHeight = window.innerHeight; //ffchromeSafariOpera

if(typeof pageWidth != "number"){ //IE

if(document.compactMode == "css1Compact"){

pageWidth = document.documentElement.clientWidth;

pageHeight = document.documentElement.clientHeight;

}else{

pageWidth = document.body.clientWidth;

pageHeight = document.body.clientHeight;

}

}

②调整窗口大小

resizeTo()resizeBy(),可能会被禁用。

      1. 导航和打开窗口

①使用window.open()方法既可以导航到一特定URL,也可以打开一个新窗口。

参数1:要加载的URL

参数2:窗口目标。若该参数是已有窗口或框架的名称,那么就会在具有该名称的窗口或框架中加载第一个参数指定的URL

参数3:打开新窗口的特性设置。(一个特性字符串)

参数4:表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。

②通过window.open()打开的窗口有一个指向打开他的原始窗口的属性指针opener

③通过window.open()通过window.open()打开的窗口可以通过close()关闭。

④检测window.open()打开的窗口是不是屏蔽了。

var blocked = false;

try{

var wroxWin = window.open("http://…","_blank");

if(wroxWin == null){

blocked = true;

}

}catch(ex){

blocked = true;

}

if(blocked){

alert("The popup was blocked!");

}

      1. 间歇调用和超时调用

①超时调用,使用window对象的setTimeOut()方法。

接受两个参数:要执行的函数和毫秒时间。

方法返回一个数值ID,可通过ID取消尚未执行的超时调用clearTImeOut(ID)

②间歇调用

setInterval(),与超时调用基本相同,经过一定时间重复调用。

返回一个ID,通过clearInterval(ID)取消调用。

③最好不用间歇调用,易出问题。使用超时调用来模拟间歇调用时一种最佳模式。

      1. 系统对话框

①三种alert()confirm()prompt()

confirm():提供“确认”和“取消”按钮,返回布尔值。

prompt():接受两个参数,要显示给用户的文本提示和文本输入域的默认值。用户点击OK则返回输入的文本值,否则返回null

window.print()显示打印框;window.find()显示查找框。

confirm()prompt()是阻塞的,执行时页面其他代码无法运行,需等待用户答应。

    1. location对象
      1. location对象:

提供了与当前窗口中加载的文档有关的信息,还有一些导航功能。

location对象既是window对象的属性也是document对象属性,即window.location === document.location

location对象将URL解析为独立片段:

hashhosthostnamehrefpathnameportprotocolsearch

      1. 位置操作

打开新URL并在浏览器的历史记录中生成一条记录,显/隐式调用assign()

location.assign("http//#");

window.location = "http//#";

location.href = "http//";(最常用)

修改location对象的其他属性(hashsearchhostname等)也可以改变当前加载的页面。

replace()方法,用法,效果如assign(),但不在历史记录中生成新记录,用户不能回到前一页面。

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

    1. navigator对象
      1. 其中的很多属性和方法都用于检测显示网页的浏览器类型。(不可靠)
      2. 检测插件:

①在非IE浏览器中,可以使用plugins数组检测插件。

name:插件的名字

description:插件的描述

filename:插件的文件名

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

function hasPlug(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;

}

②在IE中检测插件的唯一方式就是使用专有的ActiveXObject类型,并尝试创建一个特定插件实例。

function hasIEPlugin(name){

try{

联系我们CONTACT 扫一扫
愿景:成为最专业的软件研发服务领航者
中睿信息技术有限公司 广州•深圳 Tel:020-38931912 务实 Pragmatic
广州:广州市天河区翰景路1号金星大厦18层中睿信息 Fax:020-38931912 专业 Professional
深圳:深圳市福田区车公庙有色金属大厦509~510 Tel:0755-25855012 诚信 Integrity
所有权声明:PMI, PMP, Project Management Professional, PMI-ACP, PMI-PBA和PMBOK是项目管理协会(Project Management Institute, Inc.)的注册标志。
版权所有:广州中睿信息技术有限公司 粤ICP备13082838号-2