BOM | fire on the world!

文章目录

1. window 对象
2. location 对象
1. 2.1. 查询字符串参数
2. 2.2. 位置操作

window 对象

窗口位置

款浏览器取得窗口左边和上边的位置。

1 2	var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenY; var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenX;

移动到新位置

//将窗口移动到屏幕左上角
window.moveTo(0,0);
//将窗口向下移动到100像素
window.moveBy(0,100);

窗口大小

取得页面视口的大小

var pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
if (typeof pageWidth != "number") {
    if (document.compatMode == "CSS1Compat") {
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.pageHeight;
    } else {
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.pageHeight;
    }
}

调整浏览器窗口的大小

//调整到 100 x 100
window.resizeTo(100, 100);
//调整到200 x 150
window.resizeTo(100, 50);

导航和打开窗口

弹出窗口

1	window.open("http://www.google.com", "wroxWindow", "height=400,width=400,top=10,left=10,resizable=yes");

调用 close() 方法还可以关闭新打开的窗口。

1 2	wroxWin.close(); alert(wroxWin.closed); //true

弹出窗口屏蔽程序

var blocked = false;
try {
    var wroxWin = window.open("http:www.google.com"", "_blank");
    if (wroxWin == null) {
        blocked = true;
    }
} catch (ex) {
    blocked = true;
}
if (blocked) {
    alert("The popup was blocked!");
}

间歇调用和超时调用

//不建议传递字符串
setTimeout ("alert('hello world')", 1000);
//推荐的调用方式
setTimeout(function(){
    alert('hello world');
    }, 1000);

虽然这两种调用方式都没有问题，但由于传递字符串可能导致性能损失，因此不建议以字符串作为第一个参数。
第二个参数是一个表示等待多长时间的毫秒数，但经过该时间后指定的代码不一定会执行。JavaScript 是一个单线程的解释器，因此一定时间内只能执行一段代码。为了要控制要执行的代码，就有一个JavaScript任务队列。这些任务会按照将它们添加到队列的顺序执行。setTimout()的第二个参数告诉 JavaScript 再过多长时间把当前任务到队列中。如果队列是空的，那么添加的代码回立即执行；如果队列不是空的，那么它就要等前面的代码执行完了以后再执行。

超时调用的代码都是在全局作用域总执行的，因此函数中 this 的值在非严格模式下指向 window 对象，在严格模式下是 undefined。

间歇调用

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) {
        setTimout(incrementNumber, 500);
    } else {
        alert("Done");
    }
}
setTimeout(incrementNumber, 500);

可见，在使用超时调用时，没有必要跟踪超时调用 ID，因为每次执行代码后，如果不在设置另一次超时调用，调用就会自行停止。一般认为，使用超时调用来模拟间歇调用的是一种最佳模式。在开发环境下，很少使用真正的间歇调用，原因是后一个间歇调用有可能在前一个间歇调用结束之前启用。而像前面实例中那样使用超时调用，则完全可以避免这一点。所以最好不要使用间歇调用。

系统对话框

确认对话框的典型用法如下。

if (confirm("Are you sure?")) {
    alert("I'm so glad you're sure!");
} else {
    alert("I'm sorry to hear you're not sure.");
}

调用 promet()。

var result = prompt("What is your name?", "");
if (result !== null) {
    alert("Welcome, " + result);
}

其它

//显示"打印"对话框
window.print();
//显示"查找"对话框
window.find();

location 对象

查询字符串参数

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;
    //逐个将每一项添加到 args 对象中
    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;
}

位置操作

//下列三行代码的效果完全一样
location.assign("http://www.google.com");
window.location("http://www.google.com");
location.href("http://www.google.com");
//设置新值来改变URL
//假设初始URL为 http://www.google.com/WileyCDA/
//将URL修改为"http://www.google.com/WileyCDA/#section1"
location.hash = "#section1";
//将URL修改为"http://www.google.com/WileyCDA/?q=javascript"
location.search = "?q=javascript"
//将URL修改为"http://www.yahoo.com/WileyCDA/"
location.hostname = "www.yahoo.com"
//将URL修改为"http://www.yahoo.com/mydir"
location.pathname = "mydir";
//将URL修改为"http://www.yahoo.com:8080/WileyCDA"
location.port = 8080;

没修改 location 的属性(hash除外)，页面都会以新URL重新加载

当通过上述任何一种方式修改 URL 之后，浏览器的历史纪录中就会生成一条新纪录，因此用户通过单击”后退”按钮都会导航到前一个页面。要禁用这种行为，可以使用 replace() 方法。

1	location.replace("http://www.google.com");