supce's blog

JavaScript BOM 知识整理 (一)

发表于  |    |  

BOM

BOM是browser object model的缩写，即：浏览器对象模型。BOM主要用于访问浏览器的功能，这些功能与网页的内容无关。

window对象

BOM的核心对象是window，它表示浏览器的一个实例。在浏览器中，window对象既是通过JavaScript访问浏览器窗口的一个接口，也是ECMAScript规定的Global对象。
因此，在全局作用域中声明的变量和函数都会成为window对象的属性和方法。但是，声明的全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以通过delete删除。

var age = 22;
window.name = "Nico";
delete window.age;
delete window.name;
console.log(window.age);   //22
console.log(window.name);  //undefined

窗口关系与框架

  • 当页面中包含框架时，浏览器会为每一个框架创建window对象，并且保存在frames集合中
  • 在frames集合中，可以通过数值索引（从0开始，从左至由，从上至下）或者框架名称来访问相应的window对象
  • top对象始终指向最高（最外）层的框架，也就是浏览器窗口
  • parent对象始终指向当前框架的直接上层框架
  • self对象始终指向window

窗口位置

  • screenLeft与screenX属性表示窗口相对于屏幕左边的位置

  • screenRight与screenY属性表示窗口相对于屏幕上边的位置
    为了跨浏览器使用，可以利用二元操作符:

    var left = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;

var top = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;

  • moveTo(x,y)将窗口移动到坐标值为(x,y)的位置

  • moveBy(x,y)将窗口在水平方向移动x个像素，在垂直方向移动y个像素

窗口大小

  • outerWidth和outerHeight表示浏览器窗口本身的尺寸

  • innerWidth和innerHeight表示页面视图区的大小
    这样说可能不如代码直观，比如下面这段代码：

    console.log("-----窗口大小-----");
console.log("window.outerHeight = " + window.outerHeight);
console.log("window.innerHeight = " + window.innerHeight);

效果如下：
窗口大小

也可以通过document.documentElememt.clientWidth和document.documentElement.clientHeight来获取页面视图区的大小

使用 resizeTo() 和 resizeBy()方法可以调整浏览器窗口的大小。这两个方法都接收两个
参数，其中 resizeTo() 接收浏览器窗口的新宽度和新高度， resizeBy()接收新窗口与原窗口的宽度和高度之差。

这两种方法可能被浏览器禁用，对于resizeTo,chrome只支持resize新建的空白窗口，可以这样使用：

function openWin(){
    myWindow=window.open('','','width=200,height=200');
}
function moveWin(){
    myWindow.moveTo(0,0);
    myWindow.resizeTo(500,500)
    myWindow.focus();
}
<input type="button" value="Open 'myWindow'" onclick="openWin()" />
<br /><br />
<input type="button" value="Move 'myWindow'" onclick="moveWin()" />

打开窗口

使用window.open可以打开新的浏览器窗口。这个方法可以接收 4 个参数：要加载的 URL、窗口目标、一个特性字符串以及一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。通常只须传递第一个参数，最后一个参数只在不打开新窗口的情况下使用。

如果给window.open()传递了第二个参数，而且该参数是已有窗口或框架的名称，那么就会在具有该名称的窗口或框架中加载第一个参数指定的 URL。
比如：

window.open('http://www.supce.com','_blank','height=200,widht=200,top=5,left=5,resizable=yes');

打开一个新的可以调整大小的窗口，窗口初始大小为200×200像素，并且距屏幕顶部和左边各5像素。

也可以使用window.close()来关闭页面窗口。

超时调用和间歇调用

  • 超时调用：setTimeout()
    它接受两个参数：要执行的代码和以毫秒表示的时间。其中，第一个参数可以是一个包含 JavaScript 代码的字符串，也可以是一个函数。
    该方法会返回一个数值ID，表示该超时调用。

  • 取消超时调用：clearTimeout()
    比如:

    //设置取消调用
var timeout = setTimeout(function(){
    alert("Nico");
},2000);
//取消超时调用
clearTimeout(timeout);

  • 间歇调用：setInterval()
    它的参数与setTimeout相同，也会返回一个数值ID，表示该间歇调用。

    var num = 0;
var max = 5;
var intervalId = null;
function interval(){
    console.log("Nico");
    num ++;
    if(num == max){
        clearInterval(intervalId);
    }
}
intervalId = setInterval(interval,1000);

    以上代码，每一秒输出一次nico，输出5次后结束

间歇调用也可以使用超时调用来实现，比如：

var num = 0;
var max = 5;
function timeout(){
    console.log("Nico" + num);
    num ++;
    if(num < max){
        setTimeout(timeout,1000);
    }else{
        console.log("complete");
    }
}
setTimeout(timeout,1000);

系统对话框

  • 警告对话框：alert()
  • 确认对话框：confirm()
    该方法返回一个布尔值，true表示点击了OK，false表示点击了Cancel，或者关闭了对话框
  • 文本输入框：prompt()
    如果用户单击了OK，则prompt()返回文本输入域的值。如果用户单击了Cancel或没有单击OK而是通过其他方式关闭了对话框，则该方法返回null。

Location对象

window.location和document.location引用的是同一个对象。Location 对象包含有关当前URL的信息以及与当前窗口中加载的文档有关的信息。

Location对象的属性

属性 描述
hash 设置或返回从井号 (#) 开始的 URL（锚）。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
href 设置或返回完整的 URL。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。
search 设置或返回从问号 (?) 开始的 URL（查询部分）

如果URL查询字符串为多个，可以使用下面的函数

function getQueryStringArgs(){
    //var qs = location.search.length>0 ? location.search.substring(1) : "";
    var qs = "a=1&b=2&c=3";
    var args = {},
    items = qs.length ? qs.split("&") : [],
    name = null,
    value = null;
    for(var i=0;i<items.length;i++){
        var item = items[i].split("=");
        name = decodeURIComponent(item[0]);
        value = decodeURIComponent(item[1]);
        if(name.length){
            args[name] = value;
        }
    }
    return args;
}
var result = getQueryStringArgs();
console.log(result["a"]+result["b"]+result["c"]);

页面跳转

  1. 有历史记录
    • location.assign("http:/www.supce.com")
    • window.location = "http:/www.supce.com"
    • location.href = "http:/www.supce.com"
  2. 不产生历史记录
    • location.replace("http:/www.supce.com")
  3. 重新加载
    • location.reload() //有可能从缓存中加载
    • location.reload(true) //从服务器端重新加载