读书时间《JavaScript高级程序设计》四：BOM，客户端检测

2022-12-29 23:18:29

　　隔了一段时间，现在开始看第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(用户代理信息)检测。

码农公寓

相关文章