下述内容主要讲述了《JavaScript高级程序设计(第3版)》第8章关于“BOM”。
BOM(浏览器对象模型)提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。
BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。
由于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;
对象 | 说明 | 示例 |
---|---|---|
top | top对象始终指向最高(最外)层的框架,也就是浏览器窗口 | top.frames[0] |
parent | parent(父)对象始终指向当前框架的直接上层框架 | parent.frames[0] |
self | 始终指向window | self |
说明: (1)window对象指向的都是那个框架的特定实例,而非最高层的框架。 (2)没有框架的情况下,parent一定等于top(此时它们都等于window)。
window.moveTo(100, 100); // 调整到距离左边和上边的坐标为(100, 100)
window.moveBy(100, 50); // 调整到距离左边和上边的坐标为(200, 50)
window.resizeTo(100, 100); // 调整到100*100
window.resizeBy(100, 50); // 调整到200*150
window.open(“要加载的URL”, “窗口目标或_slef、_parent、_top或_blank”, “特性字符串”, “新窗口是否取代浏览器历史记录中当前页面的布尔值”);
"http://blog.csdn.net/ligang2585116" target="myFrame">
// 等价于
var newWin = window.open("http://blog.csdn.net/ligang2585116", "myFrame");
示例:弹出窗口
"javascript:;" onclick="openWin();">打开新窗口
"javascript:;" onclick="closeWin();">关闭新窗口
<span class="hljs-keyword">var</span> newWin;
<span class="hljs-javadoc">/**
* 打开新窗口
*/</span>
function openWin(){
newWin = window.open(<span class="hljs-string">"http://blog.csdn.net/ligang2585116"</span>, <span class="hljs-string">"_blank"</span>);
<span class="hljs-comment">// 轮询监听子窗口是否被关闭</span>
<span class="hljs-keyword">var</span> timer = setInterval(function(){
<span class="hljs-keyword">if</span>(newWin.closed){
newWin = <span class="hljs-keyword">null</span>;
clearInterval(timer);
console.log(<span class="hljs-string">"子窗口已被关闭"</span>);
}
}, <span class="hljs-number">100</span>);
}
<span class="hljs-javadoc">/**
* 在父窗口中关闭子窗口
*/</span>
function closeWin(){
newWin.close();
}
(1)超时调用的代码都是在全局作用域中执行的,因此函数中this的值在非严格模式下指向window对象,在严格模式下是undefined。 (2)在开发环境下,很少使用真正的间歇调用,原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。 请参考:JavaScript高级技巧
浏览器通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示信息。这几个对话框都是同步和模态的。也就是说,显示这些对话框的时候代码会停止执行,而关掉这些对话框后代码又会恢复执行。 还有两个可以通过JavaScript打开的对话框,即“查找”和“打印”。
// 显示“打印”对话框
window.print();
// 显示“查找”对话框
window.find();
location是最有用的BOM对象之一,其既是window对象的属性,也是location对象的属性。换言之,window.location和document.location引用的是同一对象。
示例:http://blog.csdn.net/ligang2585116?name=ligang&age=26#top
属性名 | 说明 | 示例结果 |
---|---|---|
hash | 返回URL中的hash(#号后跟零或多个字符) | “#top” |
host | 返回服务器名称和端口号(如果有) | “blog.csdn.net” |
hostname | 返回不带端口号的服务器名称 | “blog.csdn.net” |
href | 返回当前加载页面的完整URL(同toString方法) | “http://blog.csdn.net/ligang2585116?name=ligang&age=26#top” |
pathname | 返回URL中的目录 | “/ligang2585116” |
port | 返回URL中的端口号,如果不存在返回空字符串 | “” |
protocol | 返回页面使用的协议 | “http:” |
search | 返回URL的查询字符串,以问好开头 | “?name=ligang&age=26” |
示例:解析字符串(传统)
function urlArgs(){
var args = {};
var query = location.search.substring(1);
var pairs = query.split("&");
for(var i=0; ivar 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);
使用location对象可以通过很多方式改变浏览器的位置。
// 立即打开新URL并在浏览器的历史记录中生成一条记录
location.assign("http://blog.csdn.net/ligang2585116");
如果是将location.href
或是window.location
设置为一个URL值,也会以该值调用assign()方法。
// 与显示调用assign()方式效果完全一样
window.location = "http://blog.csdn.net/ligang2585116";
location.href = "http://blog.csdn.net/ligang2585116";
修改location对象的其他属性也可以改变当前加载的页面。每次修改location的属性(hash除外),页面都会以新URL重新加载!!浏览器的历史记录中会生成一条记录,点击“后退”按钮会导航到前一个页面。
// replace()方法会禁止“后退”,其不在历史记录中生成新记录
location.replace("http://blog.csdn.net/ligang2585116");
location.reload(); // 重新加载(有可能从缓存中加载)
location.reload(true); // 重新加载(从服务器重新加载)
注意:不传递参数时,页面会以最有效的方式重新加载。如果页面自上次请求以来并没有改变过,页面就会从浏览器缓存中重新加载。传递参数true,会强制从服务器重新加载。
识别客户端浏览器的实际标准。
属性或方法 | 说明 | 示例 |
---|---|---|
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” |
// 调整浏览器窗口大小,使其占据屏幕的可用空间
window.resizeTo(screen.availWidth, screen.availHeight);
注意:许多浏览器都会禁用调整浏览器窗口大小的能力(如:Chrome)
history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起。 使用go()方法可以在用户的历史记录中任意跳转,可以向后也可以向前。
// 后退一页
history.go(-1);
history.back();
// 前进一页
history.go(1);
history.forward();
示例:检查是否是打开的第一个页面
if(history.length == 0){
// 这应该是用户打开窗口后的第一个页面
}