JavaScript中的BOM

BOM(Bowser Object Model)即浏览器对象模型，提供了JavaScript与浏览器交互的对象，用于访问浏览器的功能。

• window对象：是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的属性；
• document对象：文档对象；
• location对象：浏览器当前URL信息；
• history对象：浏览器访问历史信息；
• navigator对象：浏览器本身信息；
• screen对象：客户端屏幕信息；

window对象

BOM的核心是window对象，表示浏览器的一个实例它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global 对象；因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。

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

对象属性

closed：返回窗口是否已被关闭。

status：设置窗口状态栏的文本。

defaultStatus：设置或返回窗口状态栏中的默认文本。

innerHeight：返回窗口内部的文档显示区的高度。

innerWidth：返回窗口内部的文档显示区的宽度。

outerHeight：返回窗口的全部高度。

outerWidth：返回窗口的全部宽度。

length：设置或返回窗口中的框架数量。

name：设置或返回窗口的名称。

opener：返回对创建此窗口的窗口的引用。

parent：返回父窗口。

top：返回最顶层的先辈窗口。

pageXOffset：设置或返回当前页面相对于窗口显示区左上角的X位置。

pageYOffset：设置或返回当前页面相对于窗口显示区左上角的Y位置。

screenLeft, screenTop,

screenX,screenY：只读整数。浏览器窗口的左上角在显示屏上的的x, y坐标。

对象方法

open()：可以导航到特定的URL，也可以打开一个新的浏览器窗口；其接收四个参数，要加载的url，窗口目标(_self,_parent,_top,_blank)，一个可以自定义窗口属性的字符串，以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值(只在不打开新窗口的情况下使用)。

close()：关闭窗口

alert(mes)："警告"对话框，向用户显示一些他们无法控制的消息，例如错误消息。而用户只有关闭对话框的操作；

confirm(mes)："确认"对话框，显示两个按钮“确认”和“取消”，可以让用户决定是否执行给定的操作；返回一个布尔值，确认为true，取消和×为false；

prompt(mes)："提示"对话框，用于提示用户输入一些文本；接受两个参数：要显示给用户的文本提示和文本输入域的默认值；如果用户单击了OK 按钮，则返回文本输入域的值；如果用户单击了Cancel 或没有单击OK 而是通过其他方式关闭了对话框，则该方法返回null。

moveBy(x, y)：根据给定数值移动窗口在显示屏的位置，每次执行都会移动。

moveTo(x, y)：把窗口的左上角移动到给定的坐标。

resizeBy(w, h)：按照指定的像素调整窗口的大小，每次执行都会调整。

resizeTo(w, h)：把窗口的大小调整到指定的宽度和高度。

scrollBy(x, y)：按照指定的像素值来滚动内容，每次执行都会滚动。

scrollTo(x, y)：把内容滚动到指定的坐标

超时调用和间歇调用

JavaScript 是一个单线程序的解释器，因此一定时间内只能执行一段代码。为了控制要执行的代码，就有一个JavaScript 任务队列。这些任务会按照将它们添加到队列的顺序执行。如果想在特定的时刻执行代码，可以通过设置超时值和间歇时间值来实现。在特定的时间把当前任务添加到队列中，如果队列是空的，那么添加的代码会立即执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。

• 超时调用, setTimeout(func, timeout)，指定的时间过后执行代码；接受两个参数要执行的代码和以毫秒表示的时间；会返回一个数值超时调用ID。
• 间歇调用, setInterval(func, timeout)，每隔指定的时间就执行一次代码；直至间歇调用被取消或者页面被卸载。

var timeoutID = setTimeout(function () {
    alert("hello world!")
}, 1000);  //设置超时调用
clearTimeout(timeoutID);  //清除超时调用


//点击start按钮开始打印，点击stop按钮停止打印
var start = document.getElementById("start");
var stop = document.getElementById("stop");
var intervalID;
start.onclick = function () {
    if (intervalID !== undefined) {
       clearInterval(intervalID);
    }
    intervalID = window.setInterval(exec, 1000);  //设置间隔调用
};
stop.onclick = function () {
    clearInterval(intervalID);  //清除间隔调用
};
function exec() {
    console.log("hello world!");
}

location对象

location对象既是window对象的属性，也是document对象的属性；换句话说，window.location和document.location引用的是同一个对象。

对象属性

href, 返回当前加载页面的完整URL。而location对象的toString()方法也返回这个值

protocol, 返回页面使用的协议。通常是http:或https:

host, 返回服务器名称和端口号

hostname, 返回不带端口号的服务器名称

pathname, 返回URL中的目录和（或）文件名

port, 返回URL中指定的端口号。如果URL中不包含端口号，则这个属性返回空字符串

search, 返回URL的查询字符串。这个字符串以问号开头

console.log(window.location.href);  //"https://www.baidu.com/s?wd=javascript"
console.log(window.location.hash);  //""
console.log(window.location.protocol);  //"https:"
console.log(window.location.host);  //"www.baidu.com"
console.log(window.location.hostname);  //"www.baidu.com"
console.log(window.location.port);  //""
console.log(window.location.pathname);  //"/s"
console.log(window.location.search);  //"?wd=javascript"

function getQuryStringArgs() {
    var quryString = (window.location.search.length > 0 ? window.location.search.substring(1) : "");
    var quryList = quryString.length > 0 ? quryString.split("&") : [];
    var quryStringArgs = {};
    for (var i=0; i<quryList.length; i++){
        var name = quryList[i].split("=")[0];
        var value = quryList[i].split("=")[1];
        if (name){
            quryStringArgs[name] = value;
        }
    }
    return quryStringArgs;
}

var re = getQuryStringArgs();
console.log(re);

可以修改location对象的属性，进而改变当前加载的页面。修改页面URL后，浏览器的历史记录中就会生成一条新记录，因此用户通过单击“后退”按钮都会导航到前一个页面。

//假设初始化URL为http://www.javascript.com/bom/

//URL改为http://www.baidu.com
window.location = "http://www.baidu.com";

//URL改为http://www.baidu.com
location.href = "http://www.baidu.com";

//URL改为http://www.javascript.com/bom/#ahhh
location.hash = "#ahhh";  //

//URL改为http://www.javascript.com/bom/?name=boy&age=18
location.search = "?name=boy&age=18";  //

对象方法

replace(url), 根据传入的URL重新加载页面；

reload(), 强制从服务器重新加载当前页面；

//页面跳转函数
function forword(){
    location.replace("http://www.baidu.com");
}

//页面重载函数
function flash() {
    location.reload(true);
}

history对象

history 对象保存着用户上网的历史记录，从窗口被打开的那一刻算起。

length 属性，保存着历史记录的数量，如果等于0，那么此时页面是用户打开窗口的第一个页面。

对象方法

go(num),  可以在用户的历史记录中任意跳转，可以向后也可以向前；-1表示向后跳转，1表示向前跳转；

forward(),  前进；

back(), 后退；

history.go(1);  //前进
history.go(-1);  //后退
history.forward();  //前进
history.back();  //后退