BOM（JavaScript高程笔记）
再次编辑于20160115
一、window对象
双重角色
- JS访问浏览器窗口的接口
- ECAMAscript规定的Global对象
1.全局作用域
所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法
delete的差别
- 直接在window对象上定义的属性可以delete，返回true
- 全局变量不能通过delete操作符删除（[configurable] = false）,返回false
- IE<9在使用delete删除window属性时会抛出错误
访问未声明变量的差别
访问未声明的变量会抛出错误，但通过查询window对象可知某个未声明的变量是否存在
oldValue; // 抛出错误
window.oldValue; // 返回undefined
2.窗口关系和框架（frames）
略
3.窗口位置
-
IE、Opera、Safari、Chrome:::
screenLeft、screenTop -
Firefox、Safari、Chorme:::
screenX、screenY
跨浏览器取得窗口相对于屏幕左边和上边的位置
var leftPos = (typeof window.screenLeft == "number") ?
window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ?
window.screenTop : window.screenY;
1
- IE、Opera：不含浏览器工具栏，即
如果 window 对象是最外层对象，而且浏览器窗口紧贴屏幕最上端，则topPos=工具栏高度 - Firefox、Safari、Chorme：与上相反，含工具栏
2
- IE、Opera：返回当前frame相对屏幕的坐标
- Firefox、Safari、Chorme：始终返回页面中每个框架的 top.screenX 和
top.screenY 值
3
- 然并卵，以上方法无法实现跨浏览器获取窗口精准坐标值...
移动窗口
moveTo(x, y); //参数：新位置的x、y坐标
moveBy(x, y); //参数：x、y方向上移动的像素
- 这两个方法可能会被浏览器禁用，在 Opera 和 IE 7（及更高版本）中默认就
是禁用的。 - 不适用于框架，只能对最外层的 window 对象使用。
4.窗口大小（兼容何解?）
跨浏览器取得页面视口的大小
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
if (document.compatMode == "CSS1Compat"){ // 判断当前浏览器采用的渲染方式
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
改变窗口大小
resizeTo();
resizeBy();
- 这两个方法可能会被浏览器禁用，在 Opera 和 IE 7（及更高版本）中默认就
是禁用的。 - 不适用于框架，只能对最外层的 window 对象使用。
5.导航和打开窗口
window.open();
// 参数：URL、窗口目标、窗口特性、是否取代历史记录的布尔值
// 返回指向新窗口的引用，可对其调整大小或移动位置
window.close();
// 关闭用window.open()打开的窗口
top.close();
// 关闭弹出窗口自身
wroxWin.close();
alert(wroxWin.closed); // true
// 弹出窗口关闭之后，窗口的引用仍然还在，只可用于检测其 closed 属性
新窗口的opener属性
- 指向打开它(调用window.open())的原始窗口对象
- 设为null表示新窗口不需要与原始窗口通信，一旦切断联系，就无法恢复
弹窗屏蔽程序
var blocked = false;
try {
var wroxWin = window.open("http://www.wrox.com", "_blank");
if (wroxWin == null){
blocked = true;
}
} catch (ex){
blocked = true;
}
if (blocked){
alert("The popup was blocked!");
}
- 浏览器如有内置屏蔽程序阻止弹出窗口，则window.open()返回null
- 浏览器扩展或其他程序阻止弹出窗口，则window.open()抛出错误
6.超时调用和间歇调用、系统对话框
略
二、location对象
保存当前文档信息、能将URL解析为独立的片段
window.location == document.location; // true
1.查询字符串参数
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;
}
2.位置操作
- 设置location.href（修改location的其他属性也可以改变当前页面，生成历史记录，除hash外页面都会以新URL重新加载）
- location.replace("newHref") 位置改变，但不会生成历史记录，并不可后退
- location.reload() 若页面未改变，则从浏览器缓存中重载，要强制从服务器重载则使用location.reload(true)。由于网络延迟或系统资源因素，reload()之后的代码可能不会执行，因此最好将reload()放在代码最后一行
三、 navigator对象
可用于检测浏览器类型
检测插件
- 非IE浏览器-plugins数组（refresh()方法）
- IE浏览器-ActiveXObject类型，COM对象标识符
两种检测插件的方法差别太大，典型做法为针对每个插件分别创建检测函数
//检测插件（在 IE 中无效）
function hasPlugin(name){
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;
}
//检测 IE 中的插件
function hasIEPlugin(name){
try {
new ActiveXObject(name);
return true;
} catch (ex){
return false;
}
}
//检测所有浏览器中的 Flash
function hasFlash(){
var result = hasPlugin("Flash");
if (!result){
result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
}
return result;
}
//检测所有浏览器中的 QuickTime
function hasQuickTime(){
var result = hasPlugin("QuickTime");
if (!result){
result = hasIEPlugin("QuickTime.QuickTime");
}
return result;
}
注册处理程序
（不理解）
四、screen对象
五、history对象
开发人员无法得知用户浏览过的URL，但可以在不知道历史URL的情况下实现前进后退
go(); //参数：整数值、字符串，传递字符串会跳转到历史中包含该字符串的最近的位置
back();
forward();
length属性
