《JS高程（3）》BOM-01(window&窗口)-第8章笔记(06)

BOM（Browser Object Model）

BOM是JavaScript在Web使用中的核心，BOM对象提供了操作浏览器对象的API

• 重点

  1. BOM核心:window对象

  2. 控制窗口、框架和弹框

  3. 页面信息获取:location对象

  4. 浏览器信息获取:navigator对象

---

BOM核心:window对象

window：浏览器实例，为提供JavaScript访问浏览器窗口的接口的同时，也是Global对象。

全局作用域

window：Global全局对象；

全局变量均会成为window的属性，和直接在window上定义的属性差别为：delete操作符可删除window对象上定义的属性，单不能删除全局属性。

通过var创建的属性，[[Configurable]]默认值为false.

var age = 29;
window.color = "red";

//IE<9抛出错误，其他浏览器返回false
delete window.age;

//IE<9抛出错误，其他浏览器返回true
delete window.color;

alert(window.age); //29
alert(window.color); //undefined

在控制台测试结果：

var age = 29;
window.color = 2;
delete window.age;
delete window.color;
console.log(window.age); //29
console.log(window.color); //2
console.log(Object.getOwnPropertyDescriptor(window,'color'));// Object {value: 2, writable: true, enumerable: true, configurable: false}

额，这个是我的浏览器故障了么，好尴尬….

• 通过window来判断变量是否声明

window作为JavaScript顶层对象(某些运行环境，比如V8、Rhino除外)，全局域中所有的变量都是它的属性，所以要判断一个变量是否声明，可以通过确定window是否存在这个属性。

if(window.obj){
    alert('存在')
}else{
    alert('undefined')
}

---

控制窗口、框架和弹框

窗口关系及框架

window.frames:返回一个类似数组的窗口本身对象，列出当前窗口所有子框架名字。

通过对框架的访问来修改样式

 var frames = window.frames; 
 // or 
 // var frames = window.parent.frames;

 for (var i = 0; i < frames.length; i++) { 
// do something with each subframe as frames[i]

frames[i].document.body.style.background = "red";
}

window.top : 返回当前窗口对象层次结构中最顶层浏览器窗口。

 var topWindow = window.top;

window.parent : 返回当前窗口或子窗口的最直接的父级窗口。

 parentWindow = window.parent ;

窗口位置

IE Safari Chrome Opera支持:
- screenLeft;
- screenTop;

Safari Chrome Firefox支持：
- screenX;(返回值为window.top.sreenX)
- screenY;(返回值为window.top.sreenY)

在不同浏览器中去的窗口距屏幕左边和上边的位置：

var left = (typeof window.screenLeft == "number")window.screenLeft:window.screenX;
var top= (typeof window.screenTop == "number")window.screenTop .screenY;
//在跨浏览器的情况下，无法精准确定窗口的精确坐标

将窗口精确移至某个坐标：
moveTo(x,y):x,y接受新位置的坐标；
moveBy(x,y):x,y接受水平和吹制方向上所移动的像素数。

注：

• 坐标原点（0,0）为屏幕左上角；
• 该方法只对window最外层对象使用，且不适用于框架。

窗口大小

1. 窗口中页面视图器的大小（减去边框的宽度）

   • innerWidth
   • innerHeight

2. Safari IE9+ Firefox：返回浏览器窗口本身尺寸
   Opera：返回当前单个标签页对应的浏览器窗口

   • outerWidth
   • outerHeight

3. 视口与窗口

   • 视口基础设备坐标；
   • 窗口基于逻辑坐标；
     在Chrome中，innerHeight=outerHeight, innerWidth=outerWidth时，即为视口尺寸。

4. 页面视口信息

   • document.documentElement.clientWidth

   • document.documentElement.clientHeight
     在移动IE中提供可见视口尺寸，随着页面缩放，值会跟随变化。
     在其他移动浏览器中，document.documentElement为布局视口，即渲染后页面的实际大小（可见视口只是整个页面中的一小部分）

   • document.body.clientWidth

   • document.body.clientHeight
     在移动IE中提供布局视口尺寸，随着页面缩放，值不会跟随变化。
     Chrome在document.documentElement与document.body中均可取得视口的大小；

在使用属性前，先判断用户设备
var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
if (type of pageWidth != "number" ) {
    if(document.compatMode == "CSS1Compat"){
        pageWidth = document.documentElement.clientWidth;
        pageHeight =document.documentElement.clientHeight;
    }else{
        pageWidth = document.body.clientWidth;
        pageHeight =document.body.clientHeight;
    }
}

移动IE不支持innerWidth,先判断是否为低版本IE浏览器，是的话执行下面语句。

5. 调整浏览器窗口大小

• resizeTo(num1,num2):num1,num2接收浏览器窗口的新宽度和新高度；
• resizeBy(num1,num2):num1,num2接收浏览器新窗口与旧窗口宽度差和高度差。
  在IE7+和Opera中禁用，且只对最外层window对象有效

导航和打开窗口

window.open()

var windowObjectReference = window.open(strUrl, strWindowName, [strWindowFeatures]);

• strUrl:在新窗口中加载URL,加载内容可以是HTML，入一张图片，或者任意浏览器所支持的资源；
• strWindowName：窗口的名称/目标，若指定target属性或窗口的名称,就会在指定窗口中打开URL；否则，会创建一个新窗口并命名。
• strWindowFeatures：特性字符串，包含了新窗口的一组用逗号分割的特性，在窗口打开之后，就不能用JavaScript改变窗口的功能和工具栏的设置。
• replace:新页面时候取代浏览器记录历史中当前加载页面的布尔值

    var newWindow=window.open('','','width=200,height=100');
    newWindow.document.write("This is 'newWindow'");
    newWindow.focus();

1. 弹出窗口
   当strWindowName值为不存在的窗口或框架，会根据strWindowFeatures传入的字符串创建一个新窗口或新标签页，如果第三个参数，就会按照默认设置打开窗口，在不打开新窗口的情况下，会忽略该参数。

window.open("Url", "newWindow", "height = 500px, width = 200px, top = 10px, left = 10px, location = yes")

打开一个新的浏览器中显示地址栏，大小为500px*200px,上边沿和左边沿距离屏幕10px的窗口。

window.opener在弹出窗口window.top中存在，指向调用window.open()的窗口或框架。
当window.opener=null ，将切断新创建的标签页与打开它的标签页间的关系，当打开原始窗口时，弹窗将不再出现。

1. 安全限制
   为避免恶意弹窗，大部分浏览器对弹窗进行了限制，不许关闭状态栏、不许关闭地址栏、不许再屏幕外创建弹窗等、不支持strWindowFeatures等

2. 弹出窗口屏蔽程序
   大部分浏览器都有内置弹出窗口屏蔽程序，确定方法：

var wroxWin = window.open("http://www.wrox.com", "_blank");
//通过判断window.open()是否返回null
if(wroxWin == null){
    alert ("the popup was blocked")
}

通过浏览器扩展或其他程序阻止弹出窗口，window.open()会抛出错误。要准确的检验弹出窗口是否被屏蔽，必须在返回检测值的同事，将对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 blocker!");
}

4、 间歇调用和超时调用

• 超时调用：间隔一定时间后执行

  1. 设置方式

     setTimeout(function(){},time);
     参数一：要执行的代码；
     参数二：执行前等待的时长（ms）;

  2. 取消方式

     clearTimeout(ID)

• 间歇调用:每个一段时间调用一次

  1. 设置方式

     setInterval(function(){},time)；
     参数一：要执行的代码；
     参数二：执行前等待的时长（ms）;

  2. 取消方式

     clearInterval(ID) // 若不停止，将会一直执行至页面卸载

var num = 0;
var max = 10;
var intervalId = null;

function incrementNumber(){
    num++;

    //如果执行次数达到了max设定的值，则取消后续尚未执行的调用
    if(num == max){
        clearInterval (intervalId);
        alert("Done");
    }
}
intervalId = setInterval(incrementNumber , 500);

尽量避免使用setInterval()，可以用setTimeout() 模拟间歇调用功能。

var num = 0;
var max = 10;

function incrementNumber(){
    num++;
    if(num < max){
        setTimeout (incrementNumber ,500);
    }else{
        alert("Done");
    }
}
intervalId = setInterval(incrementNumber , 500);

1. 系统对话框
   外观由操作系统设定，这几个方法打开的对话框都是同步和模态的，当现实对话框时代码会停止执行，关闭后代码恢复执行。

   • alert()：指定文本+一个OK（“确定”）按钮；
     生成“警告对话框”，显示些用户无法控制的消息。

   • confirm()：指定文本+一个OK（“确定”）按钮+一个Cancel（“取消”）按钮；
     生成“ 确认对话框”，让用户决定是否决定操作。

//文本显示内容
if (confirm("Are you sure?")){
//true显示内容
    alert("I'm so glad you're sure!")
}else{
//false显示内容
    alert("I'm sorry to hear you're not sure!")
}

• prompt():指定文本+一个OK（“确定”）按钮+一个Cancel（“取消”）按钮+文本输入域；
  生成“ 提示对话框”，让用户决定是否决定操作。
  接受两个参数：文本提示和文本输入域默认值（可为空）

var result = prompt("What is your name?", "");
if (result !== null){
    alert("Welcome," + result);
}

对话框计数器值>=2,对话框会多出一行复选框，以便用户阻止后续的对话框显示，直至再次刷新。浏览器会在空闲时充值计数器。

异步对话框

print()：打印对话框
find()：查找对话框

---

页面信息获取:location对象(见07)

浏览器信息获取:navigator对象(见08)

内容太多啦~这两块单分出来写。