JavaScript高级程序设计:第9.10章阅读笔记
来源:互联网 发布:linux运维是什么意思 编辑:程序博客网 时间:2024/05/18 03:21
第九章:客户端检测
由于各浏览器的实现有不一致性问题的存在,为了更好的兼容各版本浏览器,因此通过客户端检测后,使用特定于浏览器的技术增强解决方案。即:客户端面检测用于解决浏览器的兼容性问题
分类:能力检测,用户代理检测,怪癖检测
9.1 能力检测
说明:能力检测不是识别特定的浏览器,而是识别浏览器的能力.即:通过检测浏览器支持的API来对应用该API
步骤:
1、先检测达成目的的最常用特性
2、测试实际要用到的特性是否存在
//在IE8及之前版本中,不支持createElement方法function hasCreateElement(){ return typeof document.createElement == 'function';}
如上:在IE8及以前版本,hasCreateElement会返回false。
此外:常见的ajax兼容判断也是通过能力检测来的
function createXMLHttpRequest(){ var request = false; //一般先判断非IE浏览器 //window对象中有XMLHttpRequest存在就是非IE,包括(IE7,IE8) if(window.XMLHttpRequest){ request=new XMLHttpRequest();//非IE以及IE7,IE8浏览器 if(request.overrideMimeType){ request.overrideMimeType("text/xml");//重置mime类型 } //window对象中有ActiveXObject属性存在就是IE浏览器的低版本 }else if(window.ActiveXObject){ var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];//各种IE浏览器创建Ajax对象时传递的参数 for(var i=0; i<versions.length; i++){ try{ request=new ActiveXObject(versions[i]);//各个IE浏览器版本的参数不同 if(request){ return request; } }catch(e){ request=false; } } } return request; }
9.2 怪癖检测
说明:怪癖检测的目标是识别浏览器的特殊行为。(通常是想要知道浏览器存在什么缺陷)
一般来说,“怪癖”都是个别浏览器所独有的,而且通常被归为 bug。在相关浏览器的新版本中,这
些问题可能会也可能不会被修复。
9.3 用户代理检测
说明:通过检测用户代理userAgent字符串来确定实际使用的浏览器。通过navigator.userAgent属性访问到用户代理
1、浏览器对应引擎
Gecko —— Firefox
Webkit —— Safari,Chrome
Presto —— Opera
IOS & Android —— Webkit, (辅助确定Mac操作系统的“like Mac OS X”,确定移动端的:Mobile)
IE —— IE
2、识别呈现引擎、平台,window操作系统、移动设备,游戏系统
var client = function(){//呈现引擎var engine = { ie: 0, gecko: 0, webkit: 0, khtml: 0, opera: 0, //完整的版本号 ver: null};//浏览器var browser = { //主要浏览器 ie: 0, firefox: 0, safari: 0, konq: 0, opera: 0, chrome: 0, //具体的版本号 ver: null};//平台、设备和操作系统var system = { win: false, mac: false, x11: false, //移动设备 iphone: false, ipod: false, ipad: false, ios: false, android: false, nokiaN: false, winMobile: false, //游戏系统 wii: false, ps: false};//检测呈现引擎和浏览器var ua = navigator.userAgent;if (window.opera){ engine.ver = browser.ver = window.opera.version(); engine.opera = browser.opera = parseFloat(engine.ver);} else if (/AppleWebKit\/(\S+)/.test(ua)){ engine.ver = RegExp["$1"]; engine.webkit = parseFloat(engine.ver); //确定是 Chrome 还是 Safari if (/Chrome\/(\S+)/.test(ua)){ browser.ver = RegExp["$1"]; browser.chrome = parseFloat(browser.ver); } else if (/Version\/(\S+)/.test(ua)){ browser.ver = RegExp["$1"]; browser.safari = parseFloat(browser.ver); } else { //近似地确定版本号 var safariVersion = 1; if (engine.webkit < 100){ safariVersion = 1; } else if (engine.webkit < 312){ safariVersion = 1.2; } else if (engine.webkit < 412){ safariVersion = 1.3; } else { safariVersion = 2; } browser.safari = browser.ver = safariVersion; }} else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){ engine.ver = browser.ver = RegExp["$1"]; engine.khtml = browser.konq = parseFloat(engine.ver);} else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){ engine.ver = RegExp["$1"]; engine.gecko = parseFloat(engine.ver);//确定是不是 Firefox if (/Firefox\/(\S+)/.test(ua)){ browser.ver = RegExp["$1"]; browser.firefox = parseFloat(browser.ver); }} else if (/MSIE ([^;]+)/.test(ua)){ engine.ver = browser.ver = RegExp["$1"]; engine.ie = browser.ie = parseFloat(engine.ver);}//检测浏览器browser.ie = engine.ie;browser.opera = engine.opera;//检测平台var p = navigator.platform;system.win = p.indexOf("Win") == 0;system.mac = p.indexOf("Mac") == 0;system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);//检测 Windows 操作系统if (system.win){ if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){ if (RegExp["$1"] == "NT"){ switch(RegExp["$2"]){ case "5.0": system.win = "2000"; break; case "5.1": system.win = "XP"; break; case "6.0": system.win = "Vista"; break; case "6.1": system.win = "7"; break; default: system.win = "NT"; break; } } else if (RegExp["$1"] == "9x"){ system.win = "ME"; } else { system.win = RegExp["$1"]; } }}//移动设备system.iphone = ua.indexOf("iPhone") > -1;system.ipod = ua.indexOf("iPod") > -1;system.ipad = ua.indexOf("iPad") > -1;system.nokiaN = ua.indexOf("NokiaN") > -1;//windows mobileif (system.win == "CE"){ system.winMobile = system.win;} else if (system.win == "Ph"){ if(/Windows Phone OS (\d+.\d+)/.test(ua)){; system.win = "Phone"; system.winMobile = parseFloat(RegExp["$1"]); }}//检测 iOS 版本if (system.mac && ua.indexOf("Mobile") > -1){ if (/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)){ system.ios = parseFloat(RegExp.$1.replace("_", ".")); } else { system.ios = 2; //不能真正检测出来,所以只能猜测 }}//检测 Android 版本if (/Android (\d+\.\d+)/.test(ua)){ system.android = parseFloat(RegExp.$1);}//游戏系统system.wii = ua.indexOf("Wii") > -1;system.ps = /playstation/i.test(ua);//返回这些对象return { engine: engine, browser: browser, system: system};}();
用户代理的使用场景:
不能直接准确地使用能力检测或怪癖检测。
同一款浏览器在不同平台下具备不同的能力。
为了跟踪分析等目的需要知道确切的浏览器。
第10章:DOM
DOM:文档对象模型,是针对HTML和XML文档的一个API。描绘了一个层次化的节点树。
创建节点
document.createElement(tagName) //创建标签节点 document.createTextNode('string content') //创建文本节点
操作节点
someNode.appendChild(newNode) //添加节点someNode.lastChild //获取someNode内的最后一个节点someNode.firstChildsomeNode.childNodes //获取someNode内的所有子节点someNode.insertBefore(newNode,someNode.lastChild) //在someNode内的倒数第二位插入节点someNode.replaceChild(newNode,someNode.firstChild) //父亲日前someNode.removeChild(someNode.lastChild)someNode.cloneChild(true/false) //复制节点,true/false表示是否深度复制
1、Document对象
属性:(document对象是Document的一个实例)
document.documentElement === \
1.1 HTML元素
html元素都存在下列属性:id,title,className,lang,dir
获取元素属性:
var div = document.getElementById("myDiv") div.getAttribute("id") //获取属性 div.setAttribute() //设置属性 div.removeAttribute() //移除属性
1.2 向文档中动态插入script脚本
需求:当文档初次渲染时不需要加载脚本,只有某一事件触发或者某一场景需要时,再加载某脚本
function loadScriptString(url){ var script = document.createElement('script'); script.type = 'text/javascript' script.src = url document.body.appendChild(script) }
1.3 DOM中操作table的api
//创建 tablevar table = document.createElement("table");table.border = 1;table.width = "100%";//创建 tbodyvar tbody = document.createElement("tbody");table.appendChild(tbody);// 创建第一行tbody.insertRow(0);tbody.rows[0].insertCell(0);tbody.rows[0].cells[0].appendChild(document.createTextNode("Cell 1,1"));tbody.rows[0].insertCell(1);tbody.rows[0].cells[1].appendChild(document.createTextNode("Cell 2,1"));// 创建第二行tbody.insertRow(1);tbody.rows[1].insertCell(0);tbody.rows[1].cells[0].appendChild(document.createTextNode("Cell 1,2"));tbody.rows[1].insertCell(1);tbody.rows[1].cells[1].appendChild(document.createTextNode("Cell 2,2"));//将表格添加到文档主体中document.body.appendChild(table);
- JavaScript高级程序设计:第9.10章阅读笔记
- 阅读笔记《JavaScript高级程序设计》
- javascript高级程序设计阅读笔记
- 《javascript高级程序设计(第3版)》阅读笔记
- 【JavaScript 高级程序设计阅读笔记】JSON
- JavaScript高级程序设计阅读笔记-1
- JavaScript高级程序设计(第3版)阅读笔记第01天-js简介
- JavaScript高级程序设计(第3版)阅读笔记第02天-js基本概念
- JavaScript高级程序设计(第3版)阅读笔记第03天-ajax和Comet
- 阅读“JavaScript高级程序设计”
- 《Javascript高级程序设计(第3版)》阅读笔记(持续更新)
- javascript高级程序设计--学习笔记3 (第5章)
- Javascript高级程序设计--第8章笔记---窗口对象
- Javascript高级程序设计--第8章笔记---窗口位置
- JavaScript高级程序设计(第3版)中文在线阅读
- javaScript高级程序设计阅读总结
- 《JavaScript高级程序设计3》阅读笔记,随时更新
- JavaScript高级程序设计之JavaScript 简介 第1.1讲笔记
- php 爬虫的几种方式
- 关于Oracle存储过程中是否需要写commit的问题
- .Net4.0 任务(Task)
- Tkinter PhotoImage 踩坑记录
- 【Unity3D技术文档翻译】第1.2篇 为打包 AssetBundles 准备资产
- JavaScript高级程序设计:第9.10章阅读笔记
- 十、matplotlib系列---pyplot散点图的绘制
- elasticsearch配置详解
- fpga hdmi接收和发送部分调试(2)
- 递归之二分查找
- php 微信公众平台上传多媒体接口 41005错误
- 【C#机房重构】之存储过程实战
- css基础精华---Flex 布局教程:实例篇
- tasker支持的shell 命令大全