隔了一段时间,现在开始看第8章。
第8章:BOM
BOM提供了很多对象,用于访问浏览器的功能。BOM的核心对象是window,它表示浏览器的一个实例。
window对象是通过javascript访问浏览器窗口的一个接口,又是ECMAScript中的Global对象。
所有在全局作用域声明的变量、函数都是window对象的属性和方法。
1. 窗口关系,框架
每个框架都有window对象,并在frames集合中
每个window对象都有name属性,其中包含框架名称
top对象始终指向最高(最外)层框架,也就是浏览器窗口
parent对象始终指向当前框架的直接上层框架
self对象始终指向window对象
2. 窗口位置、视口大小
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX; var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY; var pageWidth = document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth; var pageHeight = document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
3. 打开新窗口
function openNewWindow(){ var win = window.open(‘http://www.a.com/‘, ‘aWindow‘, ‘width=300,height=300,left=10,top=10‘); win.resizeTo(500,500); win.moveTo(100,100); //win.close(); //win.opener = null; }
4. 间隔调用 超时调用
//1秒后执行 只执行一次 var timeoutId = setTimeout(function() { alert("Hello world!"); }, 1000); //clearTimeout(timeoutId); //每间隔1秒执行一次,直到取消 var timer = setInterval(function() { alert("Hello world!"); }, 1000); //clearInterval(timer); //兼容 requestAnimationFrame 用法和setTimeout类似 if (!window.requestAnimationFrame) { window.requestAnimationFrame = (window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) { return window.setTimeout(callback, 17); }); } if (!window.cancelRequestAnimationFrame) { window.cancelRequestAnimationFrame = (window.cancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelRequestAnimationFrame || window.msCancelRequestAnimationFrame || window.oCancelRequestAnimationFrame || window.clearTimeout); }
5. 系统对话框
//alert alert(‘Hello world!‘); //confirm if(confirm(‘are you ok?‘)){ //yes }else{ //no } //prompt var result = prompt("What is your name? ", ""); if(result !== null) { alert("Welcome, " + result); }
6. location对象
// http://www.a.com:1234/test.html?k1=v1&k2=v2#part2 location.hash //URL的锚部分 ( #part2 ) location.hash=‘#hash‘ //不会重新加载 location.host //URL的主机名称和端口号 location.href //完整URL location.pathname //URL的路径部分 ( /test.html ) location.port //URL的端口部分 ( 1234 ) location.protocol //URL的协议 ( http ) location.search //URL的查询部分 ( ?k1=v1&k2=v2 ) location.assign //加载一个新的文档 window.location.assign("http://www.a.com") window.location=‘http://www.a.com/‘; location.href=‘http://www.a.com/‘; location.reload //重新加载当前文档 location.reload() //重新加载 可能重缓存加载 location.reload(true) //重服务器重新加载 location.replace //用一个新文档取代当前文档 location.replace(‘www.a.com‘) //不会留下历史记录 不能点击后退返回上一个页面 //转到新URL location.assign(‘www.a.com‘) window.location=‘www.a.com‘; location.href=‘www.a.com‘;
7. navigator对象
navigator.appName //名称 navigator.appVersion //版本 navigator.appCodeName //代码名称 navigator.platform //系统平台 navigator.cookieEnabled //是否启用cookies navigator.userAgent //浏览器用户代理头的值(只读的字符串) if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){ location.href="http://www.a.com/"; }else if(/iPad/i.test(navigator.userAgent)){ location.href="http://www.b.com/" }else{ location.href="http://www.c.com/" }
8. history对象
back() //加载历史列表中的前一个URL(如果存在)等价于点击后退按钮或调用 history.go(-1) forward() //加载历史列表中的下一个URL 等价于点击前进按钮或调用 history.go(1) go() //加载历史列表中的某个具体的页面 //后退一页 history.back() history.go(-1) //前进一页 history.forward() history.go(1)
第9章:客户端检测
检测web客户端的方式很多,不到万不得已不要使用客户端检测,有更通用的方法就使用更通用的方法。
最常用的客户端检测形式是能力检测(特性检测),判断浏览器是否支持某种特性。
//基本检测格式 if(object.property){ //use object.property } //ie判断 var isIE = !!("ActiveXObject" in window); var isIE6 = !document.addEventListener && !window.XMLHttpRequest; var isIE7 = isIE && !!window.XMLHttpRequest && !document.documentMode; var isIE8 = isIE && !document.addEventListener && !!document.documentMode; if( isIE6 ) alert(‘你使用的是ie6浏览器‘) if( isIE7 ) alert(‘你使用的是ie7浏览器‘) if( isIE8 ) alert(‘你使用的是ie8浏览器‘)
在可能的情况下,尽可能使用 typeof 来检测。
用户代理检测包含大量与浏览器有关的信息。
var ua = navigator.userAgent; if(/Android|Windows Phone|webOS|iPhone|iPod|BlackBerry/i.test(ua)){ location.href="http://www.a.com/"; }else if(/iPad/i.test(ua)){ location.href="http://www.b.com/" }else{ location.href="http://www.c.com/" }
第8章主要介绍了浏览器的window对象,window对象下的各种方法、navigator对象、history对象。第9章介绍怎样检查客户端,在平常为了兼容一般都要做这样的检测。根据浏览器是否支持某个特性来检测,根据浏览器的navigator.userAgent(用户代理信息)检测。
时间: 2024-10-11 23:16:24