博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
读书时间《JavaScript高级程序设计》四:BOM,客户端检测
阅读量:4315 次
发布时间:2019-06-06

本文共 4860 字,大约阅读时间需要 16 分钟。

  隔了一段时间,现在开始看第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. 系统对话框

//alertalert('Hello world!');//confirmif(confirm('are you ok?')){	//yes}else{	//no}//promptvar 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#part2location.hash	//URL的锚部分 ( #part2 ) 	location.hash='#hash' //不会重新加载location.host	//URL的主机名称和端口号location.href	//完整URLlocation.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') //不会留下历史记录 不能点击后退返回上一个页面//转到新URLlocation.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(用户代理信息)检测。

 

  

  

转载于:https://www.cnblogs.com/eyeear/p/4645139.html

你可能感兴趣的文章
codeforces Unusual Product
查看>>
hdu4348 - To the moon 可持久化线段树 区间修改 离线处理
查看>>
springMVC中一个class中的多个方法
查看>>
Linux系统安装出错后出现grub rescue的修复方法
查看>>
线段树模板整理
查看>>
[教程][6月4日更新]VMware 8.02虚拟机安装MAC lion 10.7.3教程 附送原版提取镜像InstallESD.iso!...
查看>>
[iOS问题归总]iPhone上传项目遇到的问题
查看>>
Python天天美味(总) --转
查看>>
Spring Framework tutorial
查看>>
【VS开发】win7下让程序默认以管理员身份运行
查看>>
【机器学习】Learning to Rank 简介
查看>>
Unity 使用实体类
查看>>
【转】通过文件锁实现,程序开始运行时,先判断文件是否存在,若存在则表明该程序已经在运行了,如果不存在就用open函数创建该文件,程序退出时关闭文件并删除文件...
查看>>
MySQL常见注意事项及优化
查看>>
流畅的Python (Fluent Python) —— 前言
查看>>
Jquery-menu-aim流畅的菜单滑动体验
查看>>
Jquery EasyUI修改行背景的两种方式
查看>>
生成器模式(Builder)C++实现
查看>>
Centos 7.5安装 Redis 5.0.0
查看>>
嵌入式Linux学习笔记(0)基础命令。——Arvin
查看>>