下述内容主要讲述了《JavaScript高级程序设计(第3版)》第8章关于“BOM”。
BOM(浏览器对象模型)提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。
一、window对象
BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。
1. 全局作用域
由于window对象同时扮演者ECMAScript中Global对象的角色,因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
区别:全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以。
var a = 1;
delete a; // false
console.log(a); // 1
window.b = 1;
delete window.b; // true
console.log(window.b); // undefined
还需记住:尝试访问未声明的变量会抛出错误,但是通过查询window对象,可以知道某个可能未声明的变量是否存在。
// Uncaught ReferenceError: oldValue is not defined(…)
var newValue = oldValue;
// 不会抛出错误,值为undefined
var newValue = window.oldValue;
2. 窗口关系及框架
对象 | 说明 | 示例 |
top | top对象始终指向最高(最外)层的框架,也就是浏览器窗口 | top.frames[0] |
parent | parent(父)对象始终指向当前框架的直接上层框架 | parent.frames[0] |
self | 始终指向window | self |
说明:
(1)window对象指向的都是那个框架的特定实例,而非最高层的框架。
(2)没有框架的情况下,parent一定等于top(此时它们都等于window)。
3. 窗口位置&窗口大小
window.moveTo(100, 100); // 调整到距离左边和上边的坐标为(100, 100)
window.moveBy(100, 50); // 调整到距离左边和上边的坐标为(200, 50)
window.resizeTo(100, 100); // 调整到100*100
window.resizeBy(100, 50); // 调整到200*150
4. 导航和打开窗口
window.open(“要加载的URL”, “窗口目标或_slef、_parent、_top或_blank”, “特性字符串”, “新窗口是否取代浏览器历史记录中当前页面的布尔值”);
// 等价于
示例:弹出窗口
<a href="javascript:;" onclick="openWin();">打开新窗口</a>
<a href="javascript:;" onclick="closeWin();">关闭新窗口</a>
<script>
var newWin;
/**
* 打开新窗口
*/
function openWin(){
// 轮询监听子窗口是否被关闭
var timer = setInterval(function(){
if(newWin.closed){
newWin = null;
clearInterval(timer);
console.log("子窗口已被关闭");
}
}, 100);
}
/**
* 在父窗口中关闭子窗口
*/
function closeWin(){
newWin.close();
}
</script>
5. 间歇调用和超时调用
(1)超时调用的代码都是在全局作用域中执行的,因此函数中this的值在非严格模式下指向window对象,在严格模式下是undefined。
(2)在开发环境下,很少使用真正的间歇调用,原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。
请参考:JavaScript高级技巧
6. 系统对话框
浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示信息。这几个对话框都是同步和模态的。也就是说,显示这些对话框的时候代码会停止执行,而关掉这些对话框后代码又会恢复执行。
还有两个可以通过JavaScript打开的对话框,即“查找”和“打印”。
// 显示“打印”对话框
window.print();
// 显示“查找”对话框
window.find();
二、location对象
location是最有用的BOM对象之一,其既是window对象的属性,也是location对象的属性。换言之,window.location和document.location引用的是同一对象。
示例:javascript:void(0)
属性名 | 说明 | 示例结果 |
hash | 返回URL中的hash(#号后跟零或多个字符) | “#top” |
host | 返回服务器名称和端口号(如果有) | “blog.csdn.net” |
hostname | 返回不带端口号的服务器名称 | “blog.csdn.net” |
href | 返回当前加载页面的完整URL(同toString方法) | “javascript:void(0)” |
pathname | 返回URL中的目录 | “/ligang2585116” |
port | 返回URL中的端口号,如果不存在返回空字符串 | “” |
protocol | 返回页面使用的协议 | “http:” |
search | 返回URL的查询字符串,以问好开头 | “?name=ligang&age=26” |
1. 查询字符串参数
示例:解析字符串(传统)
function urlArgs(){
var args = {};
var query = location.search.substring(1);
var pairs = query.split("&");
for(var i=0; i<pairs.length; i++){
var pos = pairs[i].indexOf('=');
if(pos == -1) continue;
var name = pairs[i].substring(0,pos);
var value = pairs[i].substring(pos+1);
value = decodeURIComponent(value);
args[name] = value;
}
return args;
}
urlArgs();
示例:解析字符串(正则)– JavaScript正则表达式
function enhanceUrlArgs(query){
var args = {};
query.replace(/([^?&=]+)=([^&])/g, function(full, key, value){
args[key] = value;
return "";
});
return args;
}
enhanceUrlArgs(location.search);
2. 位置操作
使用location对象可以通过很多方式改变浏览器的位置。
// 立即打开新URL并在浏览器的历史记录中生成一条记录
location.assign
如果是将location.href
或是window.location
设置为一个URL值,也会以该值调用assign()方法。
// 与显示调用assign()方式效果完全一样
修改location对象的其他属性也可以改变当前加载的页面。每次修改location的属性(hash除外),页面都会以新URL重新加载!!浏览器的历史记录中会生成一条记录,点击“后退”按钮会导航到前一个页面。
// replace()方法会禁止“后退”,其不在历史记录中生成新记录
location.reload(); // 重新加载(有可能从缓存中加载)
location.reload(true); // 重新加载(从服务器重新加载)
注意:不传递参数时,页面会以最有效的方式重新加载。如果页面自上次请求以来并没有改变过,页面就会从浏览器缓存中重新加载。传递参数true,会强制从服务器重新加载。
三、navigator对象
识别客户端浏览器的实际标准。
属性或方法 | 说明 | 示例 |
cookieEnabled | 表示cookie是否启用 | true |
language | 浏览器主语言 | “zh-CN” |
onLine | 表示浏览器是否连接到了因特网 | true |
platform | 浏览器所在的系统平台 | “MacIntel” |
plugins | 浏览器中安装的插件信息的数组 | PluginArray {0: Plugin, 1: Plugin, 2: Plugin, 3: Plugin, 4: Plugin, length: 5} |
userAgent | 浏览器的用户代理字符串 | “Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36” |
四、screen对象
// 调整浏览器窗口大小,使其占据屏幕的可用空间
window.resizeTo(screen.availWidth, screen.availHeight);
注意:许多浏览器都会禁用调整浏览器窗口大小的能力(如:Chrome)
五、history对象
history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。
使用go()方法可以在用户的历史记录中任意跳转,可以向后也可以向前。
// 后退一页
history.go(-1);
history.back();
// 前进一页
history.go(1);
history.forward();
示例:检查是否是打开的第一个页面
if(history.length == 0){
// 这应该是用户打开窗口后的第一个页面
}