- window对象:
- BOM的核心,表示浏览器的一个实例;
- 在浏览器中,window对象既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象,这意味着在网页中定义的任何一个对象、变量和函数,都以window 作为其 Global 对象,故有权访问parseInt()等方法;
- 全局作用域
- 在全局作用域中声明的变量、函数都会变成window对象的属性和方法;
- 全局变量与直接在window对象上定义的属性的区别:全局变量不能通过delete操作符删除,二直接在window对象上定义的属性可以;
- 访问未声明的变量时将报错,此时可以通过查询window对象属性的方式来判断属性是否存在; var newValue = oldValue; //会抛出错误,因为oldValue未定义 var newValue = windwo.oldValue; //不会抛错,因为这是一次属性查询,未定义的将会返回undefined
- 窗口关系及框架
- 页面中包含框架时,每个框架都有自己的window对象,并且保存在frames集合中;
- frames集合中,可以通过数值索引(从0开始,从左至右,从上到下)或者框架名称来访问相应的window对象;
- 每个window对象都包含name属性,表示框架名称;
- top对象:始终指向最高(最外)层的框架,也就是浏览器窗口;对于最上层的框架,除非是通过window.open()打开的,否则其window对象的name属性不包含任何值;
- parent对象:始终指向当前框架的直接上层框架(在没有框架的情况下,parent一定等于top);
- self对象:始终只想window,可以与window对象互换使用;
- 上面的所有对象都是window对象的属性,可以通过点操作符进行访问,如window.top、window.parent等;
- 窗口位置:
- window.screenLeft、window.screenTop:IE、Safari、Opera和Chrome都支持该属性
- window.screenX、window.screenY:FireFox支持该属性,同时Safari和Chrome也同时支持;
- 跨浏览器获取窗口左边与上边位置:
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY; - window.moveTo(x, y):传入新位置的x,y坐标值;
- window.moveBy(hPixel,vPixel):传入水平和垂直方向上移动的像素数;
- moveTo()、moveBy()可能会被浏览器禁用;且在Opera和IE7(或更高版本)中默认是禁用的;且这两个方法均不适用于框架,只能对最外层的window对象使用;
- 窗口大小:
- 属性:innerWidth、innerHeight、outerWidth 和outerHeight
- IE9+、Firefox、Safari、Opera 和Chrome 均为此提供了此4 个属性;
- outerWidth 和outerHeight 属性:在IE9+、Safari 和Firefox中,这两个属性返回的是浏览器窗口本身的尺寸(无论是从最外层的window 对象还是从某个框架访问);在Opera 中,则表示页面视图容器的大小;
- innerWidth 和innerHeight属性:表示该容器中页面视图区的大小(减去边框宽度);
- 在Chrome 中,outerWidth、outerHeight 与innerWidth、innerHeight 返回相同的值,即视口(viewport)大小而非浏览器窗口大小;
- 获取页面可视窗口大小:
var pageWidth = window.innerWidth, 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():调整浏览器窗口的大小;resizeTo()接收浏览器窗口的新宽度和新高度,而resizeBy()接收新窗口与原窗口的宽度和高度之差;
-
导航和打开窗口
-
window.open(url, target, character, isReplace):既可以导航到一个特定的URL,也可以打开一个新的浏览器窗口
- url:要加载的URL
- target:窗口目标,当该参数是已有窗口或框架的名称,则会在具有该名称的窗口或框架中加载第一个参数指定的URL;
- character:是一个逗号分隔的设置字符串,在target不是已存在的窗口或框架情况下作为新窗口或新标签页特性,否则忽略该参数;
- isReplace:表示新页面是否取代浏览器历史记录中当前加载页面的布尔值;
- 通常只须传递第一个参数,最后一个参数只在不打开新窗口的情况下使用。
- window.open()方法会返回一个指向新窗口的引用:
var newWindow = window.open("http://www.wrox.com/","wroxWindow", "height=400,width=400,top=10,left=10,resizable=yes");
- 引用的对象与其他window 对象大致相似,但我们可以对其进行更多控制;
- newWindow.resizeTo(500,500):调整大小;
- newWindow.moveTo(100,100):移动位置;
- newWindow.close():关闭新打开的窗口,该方法仅适用于通过window.open()打开的弹出窗口;
- newWindow.opener:新创建的window 对象的属性,保存着打开它的原始窗口对象,这个属性只在弹出
窗口中的最外层window 对象(top)中有定义,而且指向调用window.open()的窗口或框架; - newWindow.opener = null:将opener 属性设置为null 就是告诉浏览器新创建的标签页不需要与打开它的标签页通信,因此可以在独立的进程中运行;
- 安全限制
- 弹出窗口屏蔽程序
- 弹出窗口被屏蔽有两种情况:一种是浏览器内置程序屏蔽;另一种是由第三方扩展程序屏蔽;
- 若弹出窗口是被浏览器内置程序屏蔽,则执行判断window.open()返回的值是否为null即可判断:
var wroxWin = window.open("http://www.wrox.com", "_blank"); if (wroxWin == null){ alert("The popup was blocked!"); }
- 若是被第三方扩展程序屏蔽,window.open()将会抛出一个错误,所以需要通过try-catch将其捕获
var blocked = false; try { var wroxWin = window.open("http://www.wrox.com", "_blank"); if (wroxWin == null){ blocked = true; } } catch (ex){ blocked = true; } if (blocked){ alert("The popup was blocked!"); }
- 间歇调用与超时调用
- setTimeout(execCode, time):
- execCode:可以是一个包含JavaScript代码的字符串,也可以是一个函数(推荐使用);
- time:等待时间,单位时毫秒;
- 该方法将返回一个数值ID,表示超时调用,该ID是计划执行代码的唯一标识符,可通过它来取消超时调用(通过clearTimeout(超时调用ID)取消);
- 超时调用的代码是在全局作用域中执行的,故在非严格模式下this指向window对象,严格模式下则为undefined;
- setInterval(execCode, time):
- execCode:与setTimeout相同
- time:执行间隔时间;
- 该方法调用后同样会返回一个数值ID,表示间隔调用,该ID可用于取消间隔调用(通过clearInterval(间隔调用ID)取消);
- setTimeout(execCode, time):
- 系统对话框
- alert()、confirm()、prompt()
- 外观由操作系统及(或)浏览器设置决定,而不是由CSS 决定;
- 通过这几个方法打开的对话框都是同步和模态的。也就是说,显示这些对话框的时候代码会停止执行,而关掉这些对话框后代码又会恢复执行;
- confirm()方法返回的是布尔值:true 表示单击了OK,false 表示单击了Cancel 或单击了右上角的X 按钮;
- prompt(显示的内容, 输入框默认内容)方法返回文本输入域的值:提示框中除了显示OK 和Cancel 按钮之外,还会显示一个文本输入域,以供用户在其中输入内容;
- window.print():
- window.find():
-
-
location对象
-
概述
- location 是最有用的BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能;
- window.location 和document.location 引用的是同一个对象;
- 它将URL 解析为独立的片段,让开发人员可以通过不同的属性访问这些片段;
- location的属性:
- 查询字符串参数
function getQueryStringArgs(){ //取得查询字符串并去掉开头的问号 var qs = (location.search.length > 0 ? location.search.substring(1) : ""), //保存数据的对象 args = {}, //取得每一项 items = qs.length ? qs.split("&") : [], item = null, name = null, value = null, //在for 循环中使用 i = 0, len = items.length; //逐个将每一项添加到args 对象中 for (i=0; i < len; i++){ item = items[i].split("="); name = decodeURIComponent(item[0]); value = decodeURIComponent(item[1]); if (name.length) { args[name] = value; } } return args; } 方法的调用 //假设查询字符串是?q=javascript&num=10 var args = getQueryStringArgs(); alert(args["q"]); //"javascript" alert(args["num"]); //"10"
- 位置操作
- location.assign(url):在当前页面打开新URL 并在浏览器的历史记录中生成一条记录,该方法与通过window.location、location.href来设置URL值的效果相同;
- location.replace(url):在当前页面打开新URL,但不会在浏览器的历史记录中生成记录;
- location.reload():
- location.reload();有可能从缓存中加载(如果页面自上次请求以来并没有改变过,页面就会从浏览器缓存中重新加载);
- location.reload(true);重新加载(强制从服务器重新加载)
- 位于reload()调用之后的代码可能会也可能不会执行,这要取决于网络延迟或系统资源等因素。所以,最好将reload()放在代码的最后一行。
-
JavaScript高级编程——BOM
最新推荐文章于 2024-07-31 10:51:11 发布