BOM

BOM

浏览器对象模型

ECMAScript 是 JavaScript 的核心，但若是要在 Web 中使用 JavaScript，那么 BOM(浏览器对象模型)则无疑才是真正的核心。BOM 提供了不少对象，用于访问浏览器的功能，这些功能与任意网页内容无关。多年来，缺乏事实上的规范致使 BOM 既有意思又有问题，由于浏览器提供商会按照各自的想法随意去扩展它。因而，浏览器之间共有的对象就成为了事实上的标准。这些对象在浏览器中得以存在，很大程度上是因为它们提供了与浏览器的互操做性。W3C 为了把浏览器中 JavaScript 最基本的部分标准化，已经将 BOM 的主要方面归入了 HTML5 的规范中。

window对象

BOM 的核心对象是 window，它表示浏览器的一个实例。在浏览器中，window 对象有双重角色， 它既是经过 JavaScript 访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象。这意味着 在网页中定义的任何一个对象、变量和函数，都以 window 做为其 Global 对象，所以有权访问 parseInt()等方法。

系统对话框

警告框

警告框常常用于确保用户能够获得某些信息。

当警告框出现后，用户须要点击肯定按钮才能继续进行操做。

语法：

window.alert('警告!!!警告!!!');

确认框

确认框用于使用户能够验证或者接受某些信息。

当确认框出现后，用户须要点击肯定或者取消按钮才能继续进行操做。

若是用户点击确认，那么返回值为 true。若是用户点击取消，那么返回值为 false。

语法:

var a = window.confirm('肯定登录');

提示框

提示框常常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户须要输入某个值，而后点击确认或取消按钮才能继续操纵。

若是用户点击确认，那么返回值为输入的值。若是用户点击取消，那么返回值为 null。

语法：

var name = window.prompt('你的姓名是?','xxx');

定时任务

在ECMAScript语法中为window对象提供了两个很是有用的定时任务的方法:setTimeout()和setInterval()方法

setTimeout

setTimeout()方法表示一次性定时任务作某件事情,它接收两个参数,第一个参数为执行的函数,第二个参数为时间(毫秒计时:1000毫秒==1秒)

window.setTimeout(function(){    console.log('asd');},0)console.log('123');

会发现,先打印了123,再打印了asd,由于第二个参数是一个表示等待多长时间的毫秒数，但通过该时间后指定的代码不必定会执行。 JavaScript 是一个单线程序的解释器，所以必定时间内只能执行一段代码。为了控制要执行的代码，就 有一个 JavaScript 任务队列。这些任务会按照将它们添加到队列的顺序执行。setTimeout()的第二个 参数告诉 JavaScript 再过多长时间把当前任务添加到队列中。若是队列是空的，那么添加的代码会当即 执行;若是队列不是空的，那么它就要等前面的代码执行完了之后再执行。

setlnterval()

setInterval()方法表示周期性循环的定时任务.它接收的参数跟setTimeout()方法同样。

每隔1秒让num数值+1,当num数值大于5时,中止更新

例:

var num = 0;
var timer = null;
timer = setInterval(function(){
    num++;
    if (num > 5) {
        clearInterval(timer);
        return;
    }
    console.log('num:'+ num);
},1000);

咱们可使用clearInterval()来清除当前的定时任务

location对象

location是最有用的BOM对象之一,它提供了与当前窗口中加载的文档有关的信息，还提供了一 些导航功能。事实上，location 对象是很特别的一个对象，由于它既是 window 对象的属性，也是document 对象的属性;

换句话说，window.location 和document.location 引用的是同一个对象。 location 对象的用处不仅表如今它保存着当前文档的信息，还表如今它将 URL 解析为独立的片断，让 开发人员能够经过不一样的属性访问这些片断。

属性名	例子	说明
hash	#content”	返回URL中的hash(#),若是没有,则返回空字符串
host	“www.baidu.com:80”	返回服务器名称和端口号
hostname	“www.baidu.com”	返回不带端口号的服务器名称
href	“https://www.baidu.com“	返回当前加载页面的完成URL
pathname	‘’/web/“	返回url中的目录和文件名
port	‘80’	返回url中指定的端口号,若是url中不包含端口号,则这个属性返回空字符串
seach	“?name=zhangsan”	返回url的查询字符串,这个字符串以问号开头
protocol	“https:”	返回页面使用的协议.一般是http:或https:

查询字符串参数

虽然经过上面的属性能够访问到 location 对象的大多数信息，但其中访问 URL 包含的查询字符 串的属性并不方便。尽管 location.search 返回从问号到 URL 末尾的全部内容，但却没有办法逐个 访问其中的每一个查询字符串参数。为此，能够像下面这样建立一个函数，用以解析查询字符串，而后返回包含全部参数的一个对象:

function getQueryStringArgs() {
    // ?username=mjj&pwd=18
    // 1.取得查询字符串并去掉开头的问号
    var qs = location.search.length > 0 ? location.search.substring(1) : "";
    // 保存数据的对象
    var args = {};
    // 2.取得每一项
    var items = qs.length ? qs.split('&'):  [];
    var item = null,name =  null,value = null;
    // 3.逐个将每一项添加到args对象中
    for(var i = 0; i < items.length; i++){
        item = items[i].split('=');
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);
        if (name.length) {
            args[name]  = value;
        }
    }
    return args;
}
//假设地址查询参数为?name=zhangsan&age=18
//另外还要考虑?,=,&编码的状况
var args = getQueryStringArgs();
console.log(args);//{name: "zhangsan", age: "18"}

位置操做

href属性

使用location对象能够经过不少方式来改变浏览器的位置.首先,也是最经常使用的方式经过href属性将其传递一个url

2秒后跳转到百度的web界面

例:

setTimeout(function(){
    location.href = 'https://www.baidu.com';
},2000)

当经过上述任何方式修改 URL 以后，浏览器的历史记录中就会生成一条新记录，所以用户通 过单击“后退”按钮都会导航到前一个页面。要禁用这种行为，可使用 replace()方法。这个方法 只接受一个参数，即要导航到的 URL;结果虽然会致使浏览器位置改变，但不会在历史记录中生成新记 录。在调用 replace()方法以后，用户不能回到前一个页面。

2秒以后跳转网页但不会产生历史记录

例:

setTimeout(function(){
    location.replace('https://www.baidu.com');
},2000)

reload()方法

它的做用是从新加载当前显示的页面,若是调用 reload() 时不传递任何参数，页面就会以最有效的方式从新加载。也就是说，若是页面自上次请求以来并无改 变过，页面就会从浏览器缓存中从新加载。若是要强制从服务器从新加载，则须要像下面这样为该方法 传递参数 true。

location.reload();//从新加载(有可能从缓存中加载)
location.reload(true);//从新加载(强制从服务器加载)

navigatir对象

最先由 Netscape Navigator 2.0 引入的 navigator 对象，如今已经成为识别客户端浏览器的事实标准 ,每一个浏览器中的 navigator 对象也都有一套本身的属性

//此方法只适应非IE浏览器
function hasPlugin(name){
    console.log(navigator.plugins);
    var   name = name.toLowerCase();
    for (var i=0; i < navigator.plugins.length; i++){
        if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){ return true;
                                                                       } }
    return false;
}
//检测 Flash 
alert(hasPlugin("Flash"));
alert(hasPlugin("Native Client"));

history对象

history 对象保存着用户上网的历史记录,使用 go()方法能够在用户的历史记录中任意跳转，能够向后也能够向前。这个方法接受一个参数， 表示向后或向前跳转的页面数的一个整数值。负数表示向后跳转(相似于单击浏览器的“后退”按钮),正数表示向前跳转(相似于单击浏览器的“前进”按钮)。 看例子:

//后退一页 history.go(-1);
//前进一页 history.go(1);
//前进两页 history.go(2);