07.第8章:BOM

1.window对象

window有双重角色:既是通过javascript访问浏览器窗口的一个接口,又是ES规定的Global对象。

1.1 窗口关系及框架

如果页面中包含框架,则每个框架都拥有自己的window对象,并且保存在frames集合中,可以通过数值索引或者根据框架名称来访问相应的window对象。


07.第8章:BOM_第1张图片

通过代码访问每个框架,最好使用top.frames[0]的方式,因为top对象始终指向最外层的框架。


07.第8章:BOM_第2张图片

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、窗口目标、一个特性字符串、一个表示新页面是否取代浏览器历史几种中当前加载页面的布尔值。
通常只需传递一个参数,最后一个参数只在不打开新窗口的情况下使用。



第三个参数是一个逗号分隔的设置字符串,表示在新窗口都显示哪些特性。


07.第8章:BOM_第3张图片
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!");
07.第8章:BOM_第4张图片

confirm()方法

confirm("are you sure?");

prompt()方法:提示框,用于提示用户输入一些文本。
提示框除了显示OK和Cancel按钮之外,还会显示一个文本输入域,供用户在其中输入内容。
接收两个参数:显示给用户的文本提示和文本输入域的默认值
返回:用户单机OK,返回文本输入域的值;如果取消或关闭,返回null。

let result=prompt("What is your name?","Michael");
if(result!=null){
  alert("Welcome "+ result);
}
07.第8章:BOM_第5张图片

window.print():显示打印对话框
window.find():显示查找对话框

2.location对象

既是window对象的属性,也是document对象的属性,window.location和document.location引用的是同一个对象。


07.第8章:BOM_第6张图片
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()方法。


07.第8章:BOM_第7张图片

2.3.reload()方法

3.navigator对象

用于检测显示网页的浏览器类型。


07.第8章:BOM_第8张图片

07.第8章:BOM_第9张图片

4.screen对象

07.第8章:BOM_第10张图片

07.第8章:BOM_第11张图片

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();

你可能感兴趣的:(07.第8章:BOM)