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

BOM（Browser Object Model）

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

重点

BOM核心:window对象

控制窗口、框架和弹框

页面信息获取:location对象

浏览器信息获取: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最外层对象使用，且不适用于框架。

窗口大小

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

innerWidth

innerHeight

Safari IE9+ Firefox：返回浏览器窗口本身尺寸

Opera：返回当前单个标签页对应的浏览器窗口

outerWidth

outerHeight

视口与窗口

视口基础设备坐标；

窗口基于逻辑坐标；

在Chrome中，innerHeight=outerHeight, innerWidth=outerWidth时，即为视口尺寸。

页面视口信息

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

弹出窗口

当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 ，将切断新创建的标签页与打开它的标签页间的关系，当打开原始窗口时，弹窗将不再出现。

安全限制

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

弹出窗口屏蔽程序

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

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、 间歇调用和超时调用

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

设置方式

setTimeout(function(){},time);

参数一：要执行的代码；

参数二：执行前等待的时长（ms）;

取消方式

clearTimeout(ID)

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

设置方式

setInterval(function(){},time)；

参数一：要执行的代码；

参数二：执行前等待的时长（ms）;

取消方式

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

系统对话框

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

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)

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