JS学习笔记第8章BOM

jiezi

5 年前

BOM 的核心对象是 window，它表示浏览器的一个实例。window 既是通过 Javascript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。

所有在全局作用域中声明的变量、函数都会变成 window 对象的属性和方法；

(1) 定义全局变量与在 window 对象上直接定义属性的区别在于：全局变量不能通过 delect 操作符删除，而直接在 window 对象上定义的属性可以。

var age = 29;
window.color = "red";
delect window.age;     // 报错
delect window.color;   //true

原因在于使用 var 语句添加的 window 属性有一个名为 [[Configurable]] 的特性，这个特性的值被设置为 false, 因此这样定义的属性不可以通过 delectable 操作符删除。

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

var newValue = olaValue;             // 这里会报错，因为 oldValue 未定义
var newValue = window.oldValue;      // 这里不会报错，因为这是一次属性查询

如果页面中包含框架，则每个框架都拥有自己的 window 对象，并且保存在 frames 集合中。在 frames 集合中，可以通过数值索引（从 0 开始，从左至右，从上到下）或者框架名称来访问相应的 window 对象。每个 window 对象都有一个 name 属性，其中包含框架的名称。

top 对象始终指向最高（最外）层的框架，也就是浏览器窗口；
parent（父）对象始终指向当前框架的直接上层框架；
[在某些情况下，parent 有可能等于 top；但在没有框架的情况下，parent 一定等于 top（此时它们都等于 window）]
self 对象始终指向 window；
所有这些对象都是 window 对象的属性，可以通过 window.parent、window.top 等形式来访问；

screenLeft 属性、screenTop 属性：分别用于表示窗口相对于屏幕左边和上边的位置；（IE、Safiari、Opera、Chrome）
screenX 属性、screenY 属性：分别用于表示窗口相对于屏幕左边和上边的位置；（Firefox、Safari、Chrome）
moveTo()方法、moveBy()方法：将窗口精确地移动到一个新位置，moveTo()接收的是新位置的 x 和 y 坐标值，moveBy()接收的是在水平和垂直方向上移动的像素数。

    window.moveBy(0,100);        // 将窗口向下移动 100 像素
    window.moveTo(200,300);      // 将窗口移动到（200，300）

（1）四个属性：innerWidth、innerHeight、outerWidth、outerHeight

在 IE9+、Safari 和 Firefox 中，outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸（无论是从最外层的 window 对象还是从某个框架访问）；
在 Opera 中，outerWidth 和 outerHeight 表示页面视图容器（单个标签页对应的浏览器窗口）的大小；innerWidth 和 innerHeight 则表示该容器中页面视图区的大小（减去边框宽度）；
在 Chrome 中，outerWidth、outerHeight 和 innerWidth、innerHeight 返回相同的值，即视口大小而非浏览器窗口大小

（2）取得视口大小

在 IE、Safari、Firefox、Safari、Opera 和 Chrome 中，document.documentElement.clientWidth document.documentElement.clientHeight 中保存了页面视口的信息；
在 IE6 中，这些属性必须在标准模式下有效；如果是混杂模式，则需通过 document.body.clientWidth 和 document.body.clientHeight 取得相同信息；
在混杂模式的 Chrome 中，均可使用。例：无法确定浏览器窗口本身大小，但却可取得页面视口的大小

var pageWidth=window.innerWidth,
    pageHeight=window.innerHeight;
if(typeof pageWidth !="number"){if(document.compatMode=="CSS1Compat"){  // 通过检查 document.compatMode 来确定页面是否处于标准模式
        pageWidth=document.documentElement.clientWidth;
        pageHeight=document.documentElement.clientHeight
    }
    else{
        pageWidth=document.body.clientWidth;
        pageHeight=document.body.clientHeight;
    }
}

（3）调整浏览器窗口大小

resizeTo(): 接收两个参数，接收浏览器窗口的新宽度和新高度
resizeBy(): 接收两个参数，接收新窗口与原窗口的宽度和高度之差

   window.resiazeTo(100,100);    // 调整到 100*100
   window.resizeBy(100,50);      // 调整到 100*150

window.open() 这个方法通常可以接收四个参数：要加载的 URL、 窗口目标 、 一个特性字符串 以及一个 表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。

通常只需传递第一个参数，最后一个参数只在不打开窗新窗口的情况下使用；
如果传递了第二个参数，而且该参数是已有窗口或框架的名称，那么就会在具有该名称的窗口或框架中加载第一个参数指定的 URL；第二个参数也可以是任何一个特殊的窗口名称，如_self、_parent、_top、_blank;
如果给 window.open()传递的第二个参数并不是一个已经存在的窗口或框架，那么该方法就会根据在第三个参数位置上传入的字符串创建一个新窗口或新标签页。

调用 close()方法还可以关闭新打开的窗口，这个方法仅适用于通过 window.open()打开的弹出窗口；
新创建的 window 对象有一个 opener 属性，其中保存着打开它的原始窗口对象。这个属性只在弹出窗口中的最外层 window 对象（top）中有定义。将新创建的变迁也的 opener 属性设置为 null，即表示在单独的进程中运行新标签页。

超时调用：表示在指定时间后执行代码 setTimeout(要执行的代码，以毫秒表示的时间)、clearTimeout(超时调用 ID)
注意: 经过一定时间后改代码也不一定执行，因为 JS 是一个单线程解释器，任务会按照队列执行，经过该时间将任务添加到队列中。如果队列为空，添加的代码就会立即执行，否则就要等前面的代码执行完了以后再执行
间歇调用：表示每隔指定的时间就执行一次代码 setINterval(要执行的代码，以毫秒表示的时间)、clearInterval(间歇调用 ID)

// 设置超时调用
var  timeoutId = setTimeout(function() {alert("Hello World");
},1000);
// 取消
clearTimeout(timeoutId);


// 设置间歇调用
var  timeintervalId = setTimeout(function() {alert("Hello World");
},1000);
// 取消
clearTimeout(timeintervalId);

在开发环境下，很少使用真正的间隙调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。因此一般认为使用超时调用来模拟间歇调用是一种最佳模式。如下，是采用超时调用模拟一个间歇调用。

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


// 超时调用模拟间歇调用
var num = 0;
var max = 10;
var intervalId = null;
function incrementNumber() {
    num++;
    // 如果执行次数达到了 max 设定的值，则取消后续尚未执行的调用
    if(num < max) {setTimeout(incrementNumber, 500);
    }else{alert("Done");
    }
}
setTimeout(incrementNumber, 500);

alert();
confirm();
prompt(要显示给用户的提示，文本输入域的默认值)；// 显示“打印”对话框
window.print();
// 显示“查找”对话框
window.find();

function getQueryStringArgs() {
    // 取得查询字符串并去掉开头的问号
    var qs = (location.search.length>0 ? location.search.substring(1) : ""),
    // 保存数据的对象
    args = {},
    // 取得每一项
    items = qs.length ? qs.split("&") : [],
    item = null,
        name = null,
        value = null,
        // 在 for 循环中使用
        i = 0,
        len = items.length;
    // 逐个将每一项添加到 agrs 对象中去
    for(i=0; i<len; i++) {item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);

        if(name.length) {args[name] = value;
        }
    }
    return args;
}

P208

replace(要导航到的 URL)，在调用 replace()方法之后，用户不能会发哦前一个界面；
reload()作用是重新加载当前显示的界面。
location.reload(); // 重新加载（有可能从缓存中加载）
location.reload(true); // 重新加载（从服务器重新加载）

Navigator 对象包含有关浏览器的信息。通常用于检测显示网页的浏览器类型。

Screen 对象包含有关客户端显示屏幕的信息。

History 对象包含用户（在浏览器窗口中）访问过的 URL。History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
length 属性，go()、back()、forward()方法

JS学习笔记第8章BOM

1、window 对象

1.1 全局作用域

1.2 窗口关系及框架

1.3 窗口位置

1.4 窗口大小

1.5 导航和打开窗口

1.6 间歇调用和超时调用

1.7 系统对话框

2、location 对象

2.1 查询字符串参数

2.2 位置操作

3、navigator 对象

4、screen 对象

5、history 对象