《JavaScript高级程序设计》学习笔记——BOM
Author:Chemandy
第8章 BOM
1. window对象
1）基本概念
①window对象既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。
②window对象为Global对象的角色，全局作用域中声明的变量，函数都会变成window对象的属性和方法。
2）窗口关系及框架
①在使用框架的情况下，浏览器会存在多个Global（window）对象。窗体一个，各个框架一个。
②访问框架：window.frames[0]，window.frames["framename"}，top.frames[0]，top.frames["framename"]，frames[0]，frames["framename"]
□ 建议使用top对象访问，因top对象始终指向最高（最外）层的框架，也就是浏览器窗口。
□ parent对象始终指向当前框架的直接上层框架。
□ self对象，它始终指向window，可以与window呼唤。
3）窗口位置
属性及方法很多，需考虑各兼容性。
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
使用moveTo()和moveBy()有可能将窗口精确地移动到新位置（这两方法有可能被禁用）。
4）窗口大小
①跨浏览器无法取得窗口大小，只能取得页面视图大小。
var pageWidth = window.innerWidth, pageHeight = window.innerHeight; //对ff、chrome、Safari、Opera
if(typeof pageWidth != "number"){ //对IE
if(document.compactMode == "css1Compact"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}else{
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
②调整窗口大小
resizeTo()和resizeBy()，可能会被禁用。
5）导航和打开窗口
①使用window.open()方法既可以导航到一特定URL，也可以打开一个新窗口。
□ 参数1：要加载的URL
□ 参数2：窗口目标。若该参数是已有窗口或框架的名称，那么就会在具有该名称的窗口或框架中加载第一个参数指定的URL。
□ 参数3：打开新窗口的特性设置。（一个特性字符串）
□ 参数4：表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。
②通过window.open()打开的窗口有一个指向打开他的原始窗口的属性指针opener。
③通过window.open()通过window.open()打开的窗口可以通过close()关闭。
④检测window.open()打开的窗口是不是屏蔽了。
var blocked = false;
try{
var wroxWin = window.open("http://…","_blank");
if(wroxWin == null){
blocked = true;
}
}catch(ex){
blocked = true;
}
if(blocked){
alert("The popup was blocked!");
}
6）间歇调用和超时调用
①超时调用，使用window对象的setTimeOut()方法。
□ 接受两个参数：要执行的函数和毫秒时间。
□ 方法返回一个数值ID，可通过ID取消尚未执行的超时调用clearTImeOut(ID)
②间歇调用
□ setInterval()，与超时调用基本相同，经过一定时间重复调用。
□ 返回一个ID，通过clearInterval(ID)取消调用。
③最好不用间歇调用，易出问题。使用超时调用来模拟间歇调用时一种最佳模式。
7）系统对话框
①三种alert()、confirm()和prompt()
□ confirm()：提供“确认”和“取消”按钮，返回布尔值。
□ prompt()：接受两个参数，要显示给用户的文本提示和文本输入域的默认值。用户点击OK则返回输入的文本值，否则返回null
□ window.print()显示打印框；window.find()显示查找框。
□ confirm()和prompt()是阻塞的，执行时页面其他代码无法运行，需等待用户答应。
2. location对象
1）location对象：
□ 提供了与当前窗口中加载的文档有关的信息，还有一些导航功能。
□ location对象既是window对象的属性也是document对象属性，即window.location === document.location
□ location对象将URL解析为独立片段：
◇hash、host、hostname、href、pathname、port、protocol、search
2）位置操作
□ 打开新URL并在浏览器的历史记录中生成一条记录，显/隐式调用assign()
location.assign("http：//#");
window.location = "http：//#";
location.href = "http：//";(最常用）
□ 修改location对象的其他属性（hash、search、hostname等）也可以改变当前加载的页面。
□ replace()方法，用法，效果如assign()，但不在历史记录中生成新记录，用户不能回到前一页面。
□ location.reload(); //重新加载（有可能从缓存中加载）location.reload(true);//重新加载（从服务器重新加载）
3. navigator对象
1）其中的很多属性和方法都用于检测显示网页的浏览器类型。（不可靠）
2）检测插件：
①在非IE浏览器中，可以使用plugins数组检测插件。
□ name：插件的名字
□ description：插件的描述
□ filename：插件的文件名
□ length：插件所处理的MIME类型数量
function hasPlug(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中检测插件的唯一方式就是使用专有的ActiveXObject类型，并尝试创建一个特定插件实例。
function hasIEPlugin(name){
try{
new ActiveXObject(name);
return true;
}catch(ex){
return false;
}
}
③鉴于检测这两种插件方法差别大，因此典型做法是针对每个插件分别创建检测函数。
fucntion hasFlash(){
var result = hasPlugin("Flash");
if(!result){
result = hasIEPlugin("Shockwave Flash.Shockwin");
}
return result;
}
3）注册处理程序
①registerContentHandler()让一个站点指明它可以处理特定类型的信息。
□ 三个参数：要处理的MIME类型、可处理该MIME类型的URL及应用程序名。
②registerProtocolHandler()：
□ 三个参数：要处理的协议类型，可处理该协议类型的URL及应用程序名。
4. screen对象：用来表明客户端能力，其中包括浏览器窗口外部的显示器信息。
5. history对象
□ 对象保存着用户上网的历史记录
□ go()方法，接受一个参数，数字或字符串
◇ 负值表向后退，正值表向前进。
◇ 字符串，浏览器会跳转到包含该字符串的第一个位置。
□ 可用简写方法back()和forward()代替go()
第九章 客户端检测
不到不得已就不要使用客户端检测，先设计最通用的方案，然后使用特定于浏览器的技术增强方案。
1. 能力检测：识别浏览器能力，再做出反应。
2. 怪癖检测：目标是识别浏览器的特殊行为。
3. 用户代理检测：通过检测用户代理字符串来确定实际使用的浏览器。
①用户代理字符串：在每次http请求中，作为响应首部发送的。可通过navigator.userAgent访问。
②用户代理检测一般当做一种万不得已才用的做法，其优先级排在能力检测和（或）怪癖检测之后。
③呈现引擎：IE(Trident)、Firefox(Gecko)、Safari(WebKit)、Konqueror(KHTML)、Chorme(WebKit)、Opera(besto)
④用户代理检测适用情况：
□ 不能直接准确地使用能力检测或怪癖检测。
□ 同一款浏览器在不同平台下具备不同的能力。
□ 为了跟踪分析等母的需要知道确切的浏览器。
