ie浏览器框架不显示_第35节 浏览器对象模型BOM-JavaScript

本内容是《Web前端开发之Javascript视频》的课件，请配合大师哥《Javascript》视频课程学习。

BOM(Browser Object Model)浏览器对象模型；其提供了独立于内容而与浏览器窗口进行交互的对象；

没有BOM标准：不同的浏览器按照各自的想法实现及扩展BOM，于是，它们之间共有的对象成为了事实上的标准；近年来，W3C为了把浏览器中Javascript最基本的部分标准化，已经将BOM的主要方面纳入了HTML5的规范中。

BOM由一系列相关的对象构成；DOM中各对象之间是层次关系；window对象是整个BOM的核心，所有对象和集合都以某种方式回接到window对象；

window对象

window对象：

其是BOM的核心对象，也是顶级对象，表示浏览器的一个实例；

浏览器窗口对文档提供一个显示的容器，是每一个加载文档的父对象；window对象表示整个浏览器窗口，但不表示其中所包含的内容；可以用于移动或调整浏览器的大小，或者产生其他的影响；

全局作用域：

在浏览器中，window对象具有双重角色，即是通过Javascript访问浏览器的一个接口，又是ES中的Global对象；

既然window是Global对象，所以window对象是所有其他对象的顶级对象，在网页中定义的任何对象、变量和函数，window对象都有权访问；即所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法；因此window前缀可以省略；

var age = 18;function sayAge(){    alert(this.age);}alert(window.age);sayAge();window.sayAge();

定义全局变量与在window对象上直接定义属性还是有一点差别：全局变量不能通过delete操作符删除，而直接在window对象上的定义的属性可以，如：

var age = 18;window.color = "green";console.log(delete window.age);  // falseconsole.log(delete window.color);  // trueconsole.log(window.age);  // 18console.log(window.color);  // undefined

age属性的特性中的[[Configurable]]，值为false，因此其不能通过delete删除；

console.log(Object.getOwnPropertyDescriptor(window,"age"));console.log(Object.getOwnPropertyDescriptor(window,"color"));

尝试访问未声明的变量会抛出错误，但通过查询window对象，可以知道某个可能未声明的变量是否存在，如：

var age = oldAge;  // 抛出错误var age = window.oldAge;  // 不会抛出错误，因为这是一次属性查询

文档元素：

如果在HTML文档中用id属性来元素命名，并且如果window对象没有此名字的属性，window对象会赋予一个属性，它的名字是id属性的值，而它们的值指向表示文档元素的HTMLElement对象，这称为全局变量的隐式应用；

在实际场景中，很少使用这种方式来访问HTML元素，它是Web浏览器发展过程中遗留的一个现象，是现代浏览器向后兼容性的考虑，如：

按钮

mydiv

窗口位置：

获取窗口(视口)的位置(即相对于屏幕左边和上边的位置)；各浏览器都实现了screenLeft和screenTop属性表示窗口的位置；但是之前的firefox并不支持，现代firefox返回-8；只有IE是文档区相对于主显示器屏幕的位置；

Firefox使用了screenX和screenY属性获取窗口位置信息；各浏览器也实现了这两个属性，但并不统一：

chrome与Opera实现了screenLeft、screenTop与screenX、screenY的统一；且最大化时，值为0；Firefox与IE实现了统一，但最大化时，值为-8；且Firefox中的screenLeft、screenTop与这两个属性实现了对应；但IE的screenLeft、screenTop与这两个属性并不对应；screenLeft、screenTop是文档区域的左上角的坐标，screenX、screenY是窗口的左上角坐标；

console.log(window.screenLeft);console.log(window.screenTop);console.log(window.screenX);console.log(window.screenY); // 为了兼容老的Firefoxvar leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;console.log("leftPos:",leftPos, ",topPos:",topPos);

pageXOffset及pageXOffset：设置或返回当前页面相对于可视区域的左及上的位置；但貌似只有Chrome支持，同时，如果是设置的话，没有效果；

注：目前，无法在跨浏览器的条件下取得窗口左边和上边的精确坐标值；如果在框架中使用，除了IE，其他浏览器的值都与以上统一；

移动浏览器窗口：

• moveBy(dx,dy)：相对移动，dx,dy可以为负；
• moveTo(x,y)：移动，x,y可以为负；

window.moveTo(50,100);window.moveBy(100,200);window.moveBy(-50,0);

注：一般很少用；这两个方法有可能会被浏览器禁用；这两个方法都不适用框架，只能对最外层的window对象使用；

窗口大小：

如果要获取浏览器窗口大小信息，各浏览器并不统一；但各浏览器都已实现了以下四个方法，但返回值并不一定相同：

• innerWidth和innerHeight属性获取视口大小(注：包括body的margin)；
• outerWidth和outerHeight属性获取浏览器窗口大小(无论是从最外层的window对象还是从某个框架访问)；

console.log(window.innerWidth);console.log(window.innerHeight);console.log(window.outerWidth);console.log(window.outerHeight);

在各浏览器的实现中，可以通过使用DOM提供的页面视口的相关信息：

document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面视口的信息；其返回值与innerWidth和innerHeight一致；

在低版本的IE中，必须通过document.body.clientWidth和document.body.clientHeight属性获取视口信息(实际上是实际内容的尺寸，但不包括border值)，但不标准；

同时，document.body.offsetWidth和document.body.offsetHeight也能获取视口相关信息，同clientWidth和clientHeight类似，只不过其包括border的宽度；

跨浏览器取得页面视口的大小：

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;    }}console.log(pageWidth);console.log(pageHeight);

调整浏览器窗口的大小：

• resizeBy(dw,dh)：相对缩放，dw,dh可以为负；
• resizeTo(w,h)：缩放到, w,h不能为负；

注：一般很少用；也有可能被禁用，同移动窗口类似

window.resizeTo(400,300);window.resizeBy(200,100);

滚动窗口(如果有滚动条)：

• scrollBy(x, y)：按照指定的像素值相对来滚动的内容(第一个参数是滚动条向右滚动，第二个参数是滚动条向下滚动，方法执行重复执行，值会累加)；(可直接在控制台上演示)
• scrollTo(x, y)：把内容滚动到指定的坐标；
• scroll(x, y)：把内容滚动到指定的坐标；
• scrollX及scrollY：

对话框：

window对象通过alert()、confirm()和prompt()三个方法可以调用系统对话框向用户显示消息；

系统对话框与在浏览器中显示的网页没有关系，也不包括HTML；它们的外观由操作系统或浏览器设置决定的，而不是由CSS决定的；此外，通过这几个方法打开的对话框都是同步和模态的，也就是说，显示这些对话框的时候代码会停止执行，而关掉这些对话框后代码又会恢复执行；

一般来说，不会使用，都是自己实现一个效果；

警告对话框window.alert(string)：

警告对话框是一个带感叹图标的小窗口，通常用来输出一些简单的文本信息；该方法接受一个字符串并将其显示给用户，并包含一个OK或确定的按钮等待用户关闭对话框；

通过alert()生成的警告对话框，用户是无法控制的，比如，显示的消息内容，用户只能看完消息后关闭对话框；

确认对话框window.confirm(string)：

确认对话框也是向用户显示消息的对话框，但与警告对话框不同的是，其具有OK与Cancle按钮，根据用户的选择，该方法返回不同的值(true或false)；程序可以根据不同的值予以不同的响应，实现互动的效果；通常放在网页中，对用户进行询问并根据其选择而做不同的控制；

if(window.confirm("确定删除吗？")){    alert("已经删除");}else{    alert("未删除");}

输入对话框window.prompt()：

用于提示用户输入的对话框；

语法: window.prompt(提示信息，默认值)；// 要显示的文本提示和文本输入域的默认值，该默认值可以是一个空字符串；

prompt("请输入你的名字","王唯");

如果用户单击了OK，则prompt()返回文本域中的值，如果单击了Cancel或使用其他方式关闭对话框，则该方法返回null，如：

var result = prompt("请输入密码：","");if(result == "8888"){    alert("登录成功");} var result = prompt("请输入你的名字","王唯");if(result !== null){    document.write("欢迎你：" + result);}else{    alert("你没有输入任何内容");}

综上所述，这些系统对话框很适合向用户显示消息并由用户作出决定；由于不涉及HTML、CSS或JS，因此它们是增强Web应用程序的一种便捷方式；

do{    var name = prompt("输入你的名字：");    var correct = confirm("你输入的是：" + name + "." + "你可以单击确定或取消");}while(!correct)alert("你好，" + name);

在弹出对话框时，还有一个特性：如果当前脚本在执行过程中会打开两个或多个对话框，那么从第二个对话框开始，每个对话框中都会显示一个复选框，以便用户阻止后续的对话框显示，除非用户刷新页面；后续被阻止的对话框包括警告框、确认框和显示输入框；

该特性最初是由Chrome实现了，后续其他浏览器也实现该特性；其工作原理就是使用了一个叫对话框计数器，可以跟踪对话框；但是浏览器没有就对话框是否显示向开发人员提供任何信息；

在实际的场景中，这三个方法是很少用的，因为它们显示的文本是纯文本，不是HTML格式的文本，只能使用空格、换行符和各种标点符号，所以往往满足不了页面设计需要，并且有可能会破坏用户的浏览体验；常见的就是使用alert()方法进行调试，用来查看某个变量的输出结果；

这三个方法都会产生阻塞，也就是说，在用户关掉它们之前，它们不会返回，后面的代码不会执行；如果当前载入文档，也会停止载入，直到用户要求的输入进行响应为止；

可以自定义一个对话框：

Javascript还有两个工具性的对话框，即查找window.find()和打印window.print()；

这两个对话框都是异步显示的，能够将控制权立即交还给脚本；其与浏览器菜单中的查找和打印命令是相同的；

这两个方法同样不会就用户对对话框中的操作给出任何信息，因此它们的用处有限；另外，既然这两个对话框是异步显示的，对话框计数器就不会将它们计算在内，所以它们也不会受用户禁用后续对话框显示的影响；

状态栏：

浏览器的状态栏通常位于窗口的底部，用于显示一些任务状态信息等。在通常情况下，状态显示当前浏览器的工作状态或用户交互提示信息; 具有status和defaultStatus属性;

默认状态栏信息：

defaultStatus属性可以用来设置在状态栏中的默认文本，是一个可读写的字符串；

状态栏瞬间信息：

status属性，在默认情况下，将鼠标放在一个超链接上时，状态栏会显示该超链接的URL，此时的状态栏信息就是瞬间信息；当鼠标离开超链接时，状态栏就会显示默认的状态栏信息，瞬间信息消失 。

浏览器已经关闭了状态栏的功能；这是出于安全的考虑，防止隐藏了超链接真正目的的钓鱼攻击；

Web前端开发之Javascript-零点程序员-王唯