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

  隔了一段时间,现在开始看第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

读书时间《JavaScript高级程序设计》四:BOM,客户端检测的相关文章

javascript高级程序设计 第九章-- 客户端检测

javascript高级程序设计 第九章-- 客户端检测 客户端检测是javascript开发中最具争议的一个话题,由于浏览器间存在差别,通常需要根据不同浏览器的能力分别编写不同的代码.有下列常使用的客户端检测方法:能力检测:在编写代码之前先检测特定浏览器的能力.例如,脚本在调用某个函数之前,可能要先检测该函数是否存在.这种检测方法将开发人员从考虑具体的浏览器类型和版本中解放出来,让他们把注意力集中到相应的能力是否存在上.能力检测无法精确地检测特定的浏览器和版本.怪癖检测:怪癖实际上是浏览器中存

读书笔记 - javascript 高级程序设计 - 第一章 简介

第一章 简介   诞生时间 1995 最初用途 客服端验证 第一版标准 注意是标准 1997年 Ecma-262  一个完整的js实现由三部分组成 ECMAScript DOM 文档对象模型 BOM 浏览器对象模型 ECMAScript的宿主环境 web浏览器 Node(服务器js平台) adobe flash js和as的关系 他们都实现了 ECMAScript 五大主流浏览器 IE Firefox Safari Chrome Opera dom介绍 它是针对xml但经过扩展用于html的应用

读书笔记 - javascript 高级程序设计 - 第二章 在Html中使用JavaScript

1 <script>的6个属性 async  立即下载当前script标签的外部脚本 但不能影响别的 charset 没用了 defer  文档显示之后再执行脚本,只对外部脚本有效 language 没用了 src type 描述代码内容Mine类型 默认就是text/javascript 没什么用 2 在解释器对<script>元素内部的所有代码求值完毕以前 页面中的其余内容都不会被浏览器加载或显示 3 有两种script 嵌入式 外部引入式 在解析外部引入式的js文件时,页面的

javascript 高级程序设计 四

新的一天开始,让我们伴随者轻快的心情,开始今天的笔记 1.操作符: (1): *./.-在ECMAScript中操作的时候,如果遇到有一个操作值不是数值型(Number),那么就会在后台调用number()方法,将其转化成Number  (2): +和上面的三个操作符是不一样的,只要其中一个操作值不是Number,那么就会在后台调用toString()或valueOf(),得到String类型,总的来说:       就是只要一个操作值不是Number那么,就会默认调用所有操作值的toStrin

JavaScript高级程序设计 之 BOM

全局变量不能通过 delete 操作符删除,而直接在 window 上定义的属性可以. 1 var age = 22; 2 window.color = "red"; 3 4 // IE < 9下以下情况都会抛出错误 5 6 delete age; //return false 7 8 delete window.color; //return true 尝试访问未声明的变量会抛出错误,但是通过查询 window 对象,可以知道某个可能未声明的对象是否存在. 如果页面中包含框架,

JavaScript高级程序设计(四): 关键字With的使用

一.关键字with 1.含义    with 语句可以方便地用来引用某个特定对象中已有的属性,但是不能用来给对象添加属性.要给对象创建新的属性,必须明确地引用该对象.   简单的说,with为一个或一组语句指定默认对象. 2.语法格式: with(object instance) { //代码块 } 有时候,我在一个程序代码中,多次需要使用某对象的属性或方法,照以前的写法,都是通过:对象.属性或者对象.方法这样的方式来分别获得该对象的属性和方法,着实有点麻烦,学习了with语句后,可以通过类似如

《高级程序设计》 9 客户端检测

能力检测 怪癖检测 用户代理检测 一.能力检测 1.更可靠的能力检测 2.能力检测,不是浏览器检测 二.怪癖检测 三.用户代理检测 1.用户代理字符串的历史 ①早期的浏览器 ②Netscape Navigator 3和Internet Explorer 3 ③Netscape Communicator 4和IE4~IE8 ④Gecko ⑤Webkit ⑥Konqueror ⑦Chrome ⑧Opera ⑨IOS和Android 2.用户代理字符串检测技术 ①识别呈现引擎 ②识别浏览器 ③识别平台

读书时间:《JavaScript高级程序设计》 一

在2011年的时候第一次看了<JavaScript高级程序设计>第二版,那时见到手上的书,第一感觉真是好厚的一本书啊.现在再次回顾一下,看的是<JavaScript高级程序设计>第三版,并记录一些了内容. 第1章:JavaScript简介 JavaScript的历史.版本,可以看到一个有趣的故事. JavaScript是什么? 一个完整的JavaScript应该有3个不同的部分组成: 1. ECMAScript(核心) ECMAScript规定了语言的:语法.类型.语句.关键字.保

《JavaScript高级程序设计》读书笔记--前言

起因 web编程过程使用javascript时感觉很吃力,效率很低.根本原因在于对javascript整个知识体系不熟,看来需要找些书脑补一下,同时欢迎众网友监督. 大神推荐书籍 看了博客大神们推荐的javascript书籍和推荐的阅读顺序,如下所示: 从头到尾对一遍<<Javascript高级程序设计>>,不懂的地方可以暂时掠过,给自己对javascript有一个大体的印象 认认真真的读完这本书:<<编写可维护的javascript>>,从编码规范,技巧,

《Javascript高级程序设计》阅读记录(二):第四章

这个系列之前文字地址:http://www.cnblogs.com/qixinbo/p/6984374.html 这个系列,我会把阅读<Javascript高级程序设计>之后,感觉讲的比较深入,而且实际使用价值较大的内容记录下来,并且注释上我的一些想法.做这个一方面是提升了我的阅读效果以及方便我以后阅读 另一个目的是,Javascript高级程序设计这本书内容很多也很厚,希望其他没有时间的人可以通过看这系列摘录,就可以大体学到书里面的核心内容. 绿色背景的内容是我认为比较值得注意的原著内容.