1.window对象
window有双重角色:既是通过javascript访问浏览器窗口的一个接口,又是ES规定的Global对象。
1.1 窗口关系及框架
如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中,可以通过数值索引或者根据框架名称来访问相应的window对象。
通过代码访问每个框架,最好使用top.frames[0]的方式,因为top对象始终指向最外层的框架。
parent对象:始终指向当前框架的直接上层框架。在没有框架的情况下parent==top==window
1.2 窗口位置
窗口相对于屏幕左边和上边的位置
IE、Safari、Opera、Chrome提供:screenLeft、screenTop属性
FireFox、Safari、Opera、:screenX、screenY属性
let leftPos=(typeof window.screenLeft=="number")?window.screenLeft:window.screenX;
let topPos=(typeof window.screenTop=="number")?window.screenTop:window.screenY;
无法在跨浏览器的条件下取得窗口左边和上边的精确值。
使用moveTo()和moveBy()方法可以将窗口精确地移动到一个新位置。
moveTo()接收的是新位置的x,y坐标值
moveBy()接收的是水平和垂直方向移动的像素数。
//移动到屏幕左上角
window.moveTo(0,0);
//将窗口移动到(200,300)的位置
window.moveTo(200,300);
//将窗口向下移动100px
window.moveBy(0,100);
//将窗口向左移动50px
window.moveBy(-50,0);
注意:在Opera和IE7及以上版本被禁用
不适用于框架,只能对最外层的window对象使用。
1.3 窗口大小
最终无法确定浏览器窗口本身的大小,但可以取得页面视口的大小
IE9+、Firefox、safari、Opera和Chrome提供了四个属性:innerWidth、innerHeight、outerWidth、outerHeight
IE8及早期版本、Firefox、safari、Opera和Chrome:document.documentElement.clientWidth、
document.documentElement.clientHeight属性
IE6中这些属性在标准模式才有效,混杂模式:document.body.clientWidth、document.body.clientHeight
let pageWidth=window.innerWidth,
pageHeight=window.innerHeight;
//如果浏览器没有window.innerWidth属性
if(typeof pageWidth !="number"){
//如果是标准模式
if(document.compatMode=="CSSlCompat"){
pageWidth=document.documentElement.clientWidth;
pageHeight=document.documentElement.clientHeight;
}else{
//如果是混杂模式
pageWidth=document.body.clientWidth;
pageHeight=document.body.clientHeight;
}
}
1.4.导航和打开窗口
window.open()方法,这个方法可以接收4个参数。
要加载的URl、窗口目标、一个特性字符串、一个表示新页面是否取代浏览器历史几种中当前加载页面的布尔值。
通常只需传递一个参数,最后一个参数只在不打开新窗口的情况下使用。
第三个参数是一个逗号分隔的设置字符串,表示在新窗口都显示哪些特性。
1.5 间歇调用和超时调用
-
1)超时调用:指定时间过后执行代码
超时调用需要使用window对象的setTimeout()方法,它接收两个参数:要执行的代码、以毫秒表示的时间,
会返回一个唯一的id
//1000ms
let timeoutId=setTimeout(function(){
alert(“Hello world!”);
},1000);
//取消超时调用
clearTimeout(timeoutId);
只要是在指定的时间尚未过去之前调用clearTimeout(),就可以完全取消超时调用。上述代码在设置超时调用之后又马上调用了clearTimeout(),结果就什么也没有发生。
-
2)间歇调用:按照指定的时间间隔重复执行代码,直至间歇调用被取消或者页面被卸载。
setInterval(),接收参数与超时调用相同。
let num=0;
let max=10;
let intervalId;
intervalId=setInterval(incrementNumber,500);
function incrementNumber(){
num++;
if(num==max){
//如果num达到最大值,取消间歇调用
clearInterval(intervalId);
alert("Done");
}
}
间歇调用可以使用超时调用实现:
let num=0;
let max=10;
let timeoutId;
timeoutId=setTimeout(incrementNumber,500);
function incrementNumber(){
num++;
if(num
1.6 系统对话框
alert()方法
alert("Hello world!");
confirm()方法
confirm("are you sure?");
prompt()方法:提示框,用于提示用户输入一些文本。
提示框除了显示OK和Cancel按钮之外,还会显示一个文本输入域,供用户在其中输入内容。
接收两个参数:显示给用户的文本提示和文本输入域的默认值
返回:用户单机OK,返回文本输入域的值;如果取消或关闭,返回null。
let result=prompt("What is your name?","Michael");
if(result!=null){
alert("Welcome "+ result);
}
window.print():显示打印对话框
window.find():显示查找对话框
2.location对象
既是window对象的属性,也是document对象的属性,window.location和document.location引用的是同一个对象。
2.1 查询字符串参数
function getQueryStringArgs(){
//获取去掉?之后的查询字符串
let str=location.search.length>0?location.search.substring(1) : "");
//将字符串按照&划分开
let items=str.length>0?str.split("&") : [];
let item,name,value;
let args={};//定义字面量对象
for(let i=0;i0)
args[name]=value; //将key,value放入args。
}
return args;
}
2.2 网址操作
assign()方法改变网址
location.assign(“http://www.baidu.com”);
使用location.href和window.location设置URL值,也会调用assign()方法。
2.3.reload()方法
3.navigator对象
用于检测显示网页的浏览器类型。
4.screen对象
5.history对象
history对象保存着用户上网的历史纪录,从窗口被打开那一刻起。因为history是window对象的属性,因此每个浏览器窗口、每个框架都有自己的history对象。出于安全考虑,开发人员无法得知用户浏览过的url,不过可以借由用户访问过的页面列表,在不知道URL的情况下实现前进后退。
前进后退
- go()方法
//参数是负数,后退
history.go(-1);
//参数是正数,前进正数页,这里1页
history.go(1);
//前进2页
history.go(2);
//参数是字符串,跳转到历史纪录中包含该字符串的第一个位置
history.go("wrox.com");
- 使用back()和forward()代替go()
//前进一页
history.forward();
//后退一页
history.back();