JavaScript高级程序设计(4)
第12章 BOM
### 12.1 window对象 361 ##### 12.1.1 Global作用域 >因为 window 对象被复用为 ECMAScript 的 Global 对象,所以通过 var 声明的所有全局变量和函数都会变成 window 对象的属性和方法。 ```javascript var age = 29; var sayAge = () => alert(this.age); alert(window.age); // 29 sayAge(); // 29 window.sayAge(); // 29 ``` ##### 12.1.2 窗口关系 - top 对象始终指向最上层(最外层)窗口,即浏览器窗口本身。 - parent 对象则始终指向当前窗口的父窗口。如果当前窗口是最上层窗口,则 parent 等于 top(都等于 window)。 - 最上层的 window如果不是通过 window.open()打开的,那么其 name 属性就不会包含值, - 还有一个 self 对象,它是终极 window 属性,始终会指向 window。实际上,self 和 window 就是同一个对象。之所以还要暴露 self,就是为了和 top、parent 保持一致。 - 这些属性都是 window 对象的属性,因此访问 window.parent、window.top 和 window.self都可以。这意味着可以把访问多个窗口的 window 对象串联起来,比如 window.parent.parent。 ##### 12.1.3 窗口位置与像素比 - window. screenLeft ():表示窗口相对于屏幕左侧的位置 ,返回值的单位是 CSS 像素。 - window. screenTop ():表示窗口相对于屏幕顶部的位置 ,返回值的单位是 CSS 像素。 - window.moveTo(x,y):表示窗口移动到的新位置。 - window.moveBy(x,y):表示窗口相对当前位置在两个方向上移动的像素数。 - window.devicePixelRatio :像素比,表示物理像素与逻辑像素之间的缩放系数。 - > 依浏览器而定,以上方法可能会被部分或全部禁用。 ##### 12.1.4 窗口大小 - innerWidth和 innerHeight :返回浏览器窗口中页面视口的大小(不包含浏览器边框和工具栏)。 - outerWidth 和 outerHeight: 返回浏览器窗口自身的大小(不管是在最外层 window 上使用,还是在窗格<frame>中使用)。 - resizeTo(x,y):调整窗口大小,接收新的宽度和高度值。只能应用到最上层的 window 对象。 - resizeBy(x,y):调整窗口大小,接收宽度和高度各要缩放多少。只能应用到最上层的 window 对象。 - 浏览器窗口自身的精确尺寸不好确定,但可以确定页面视口的大小,如下所示: ```javascript let pageWidth = window.innerWidth, pageHeight = window.innerHeight; //检查 pageWidth 是不是一个数值 if (typeof pageWidth != "number") { //则通过 document.compatMode来检查页面是否处于标准模式 if (document.compatMode == "CSS1Compat"){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else { pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } } ``` > 在移动设备上,window.innerWidth 和 window.innerHeight 返回视口的大小,也就是屏幕上页面可视区域的大小。document.documentElement.clientWidth 和 document.documentElement. clientHeight 返回的布局视口的大小,即渲染页面的实际大小。布局视口是相对于可见视口的概念,可见视口只能显示整个页面的一小部分。Mobile Internet Explorer 把布局视口的信息保存在document.body.clientWidth 和 document.body.clientHeight 中。在放大或缩小页面时,这些值也会相应变化。 ##### 12.1.5 视口位置 - window.pageXoffset/window. scrollX:返回文档/页面水平方向滚动的像素值。 - window.pageYoffset/window.scrollY:返回文档在垂直方向已滚动的像素值。 - window.scroll(x-coord, y-coord)/window.scroll(options):滚动窗口至文档中的特定位置。 - window.scrollBy(x-coord, y-coord)/window.scrollBy(options):在窗口中按指定的偏移量滚动文档。 - window.scrollTo(x-coord,y-coord)/window.scrollTo(options):滚动到文档中的某个坐标。 ```javascript window.scroll({ top: 100, left: 100, behavior: "smooth", }); //向下滚动一页 window.scrollBy(0, window.innerHeight); //向上滚动一页 window.scrollBy(0, -window.innerHeight); //使用 options window.scrollBy({ top: 100, left: 100, behavior: "smooth", }); window.scrollTo( 0, 1000 ); // 设置滚动行为改为平滑的滚动 window.scrollTo({ top: 1000, behavior: "smooth" //behavior表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值 auto }); ``` ##### 12.1.6 导航与打开新窗口 - window.open(url, target, windowFeatures,bool) - url:可选,表示要加载的资源的 URL 或路径。留空或省略此参数,则会在目标浏览上下文中打开一个空白页。 - target:可选,用于指定加载资源的浏览上下文的名称。如果该名称无法识别现有的上下文,则会创建一个新的上下文,并赋予指定的名称。还可以使用特殊的 target 关键字:_self、_blank、_parent 和 _top。该名称可用作 <a> 或 <form> 元素的 target 属性。 - windowFeatures:可选 一个字符串,包含以逗号分隔的窗口特性列表,形式为 name=value,布尔特性则仅为 name。这些特性包括窗口的默认大小和位置、是否打开最小弹出窗口等选项。支持以下选项: - width 或 innerWidth:指定内容区域(包括滚动条)的宽度。最小要求值为 100。 - height 或 innerHeight:指定内容区域(包括滚动条)的高度。最小要求值为 100。 - left 或 screenX:指定从用户操作系统定义的工作区左侧到新窗口生成位置的距离(以像素为单位)。 - top 或 screenY:指定从用户操作系统定义的工作区顶部到新窗口生成位置的距离(以像素为单位)。 - noopener:如果设置了此特性,新窗口将无法通过 Window.opener 访问原窗口,并返回 null。 - noreferrer:如果设置了此特性,浏览器将省略 Referer 标头,并将 noopener 设为 true。 - popup:如果启用此特性,则要求使用最小弹出窗口。弹出窗口中包含的用户界面功能将由浏览器自动决定。 - location: yes或no, 表示是否显示地址栏。不同浏览器的默认值也不一样。 - fullscreen: yes或no, 表示新窗口是否最大化。仅限 IE 支持 - Menubar: yes或no, 表示是否显示菜单栏。默认为"no" - resizable: yes或no, 表示是否可以拖动改变新窗口大小。默认为"no" - scrollbars: yes或no, 表示是否可以在内容过长时滚动。默认为"no" - status: yes或no, 表示是否显示状态栏。不同浏览器的默认值也不一样 - toolbar: yes或no, 表示是否显示工具栏。默认为"no" - top: 数值, 新窗口的 y 轴坐标。这个值不能是负值 - bool:表示新窗口在浏览器历史记录中是否替代当前加载页面的布尔值。 ```javascript let wroxWin = window.open("http://www.wrox.com/", "wroxWindow", "height=400,width=400,top=10,left=10,resizable=yes"); // 缩放 wroxWin.resizeTo(500, 500); // 移动 wroxWin.moveTo(100, 100); wroxWin.close(); ``` - **opener** 新创建窗口的 window 对象有一个属性 opener,指向打开它的窗口。这个属性只在弹出窗口的最上层 window 对象(top)有定义,是指向调用 window.open()打开它的窗口或窗格的指针。 在某些浏览器中,每个标签页会运行在独立的进程中。在这些浏览器中,可以将新打开的标签页的 opener 属性设置为 null,表示新打开的标签页可以运行在独立的进程中。 ```javascript let wroxWin = window.open("http://www.wrox.com/", "wroxWindow", "height=400,width=400,top=10,left=10,resizable=yes"); alert(wroxWin.opener === window); // true wroxWin.opener = null; ``` - 弹窗屏蔽程序 ```javascript //检查弹窗是否被屏蔽 无论弹窗是用什么方法屏蔽的,以下代码都可以准确判断调用 window.open()的弹窗是否被屏蔽了 let blocked = false; try { let wroxWin = window.open("http://www.wrox.com", "_blank"); if (wroxWin == null){ blocked = true; } } catch (ex){ blocked = true; } if (blocked){ alert("The popup was blocked!"); } ``` ##### 12.1.7 定时器 - setTimeout():用于指定在一定时间后执行某些代码。调用时,会返回一个表示该超时排期的数值 ID,是被排期执行代码的唯一标识符,可用于取消该任务。 - clearTimeout():取消等待中的排期任务。只要是在指定时间到达之前调用 clearTimeout(),就可以取消超时任务。在任务执行后再调用clearTimeout()没有效果。 ```javascript // 设置超时任务 let timeoutId = setTimeout(() => alert("Hello world!"), 1000); // 取消超时任务 clearTimeout(timeoutId); ``` - setInterval():用于指定每隔一段时间执行某些代码。会返回一个循环定时 ID,可以用于在未来某个时间点上取消循环定时。 - clearInterval():取消循环定时。 ```javascript let num = 0, intervalId = null; let max = 10; let incrementNumber = function() { num++; if (num == max) { clearInterval(intervalId); alert("Done"); } } intervalId = setInterval(incrementNumber, 500); ``` > 注意在使用 setTimeout()时,不一定要记录超时 ID,因为它会在条件满足时自动停止,否则会自动设置另一个超时任务。这个模式是设置循环任务的推荐做法。setIntervale()在实践中很少会在生产环境下使用,因为一个任务结束和下一个任务开始之间的时间间隔是无法保证的,有些循环定时任务可能会因此而被跳过。而像前面这个例子中一样使用 setTimeout()则能确保不会出现这种情况。一般来说,最好不要使用 setInterval()。 ##### 12.1.8 系统对话框 - alert():弹出警告框,对话框只有一个“OK”(确定)按钮。用户唯一的选择就是在看到警告框之后把它关闭。 - confirm():弹出确认框,确认框有两个按钮:“Cancel”(取消)和“OK”(确定)。 - prompt():弹出输入框,除了 OK 和 Cancel 按钮,提示框还会显示一个文本框,让用户输入内容。 - window.print(): 显示打印对话框,异步显示的,即控制权会立即返回给脚本。 - window.find():显示查找对话框,异步显示的,即控制权会立即返回给脚本。 ```javascript if (confirm("Are you sure?")) { alert("I'm so glad you're sure!"); } else { alert("I'm sorry to hear you're not sure."); } let result = prompt("What is your name? ", ""); if (result !== null) { alert("Welcome, " + result); } ``` ### 12.2 location对象 372 | 属 性 | 值 | 说 明 | | ----------------- | ----------------------------------------------- | ------------------------------------------------------------ | | location.hash | "#contents" | URL 散列值(井号后跟零或多个字符),如果没有则为空字符串 | | location.host | "www.wrox.com:80" | 服务器名及端口号 | | location.hostname | "www.wrox.com" | 服务器名 | | location.href | "http://www.wrox.com:80/WileyCDA/?q=js#contents | 当前加载页面的完整 URL。location 的 toString()方法返回这个值 | | location.pathname | "/WileyCDA/" | URL 中的路径和(或)文件名 | | location.port | "80" | 请求的端口。如果 URL中没有端口,则返回空字符串 | | location.protocol | "http:" | 页面使用的协议。通常是"http:"或"https:" | | location.search | "?q=javascript" | URL 的查询字符串。这个字符串以问号开头 | | location.username | "foouser" | 域名前指定的用户名 | | location.password | "barpassword" | 域名前指定的密码 | | location.origin | "http://www.wrox.com" | URL 的源地址。只读 | ##### 12.2.1 查询字符串 location.search 返回了从问号开始直到 URL 末尾的所有内容,但没有办法逐个访问每个查询参数。下面的函数解析了查询字符串,并返回一个以每个查询参数为属性的对象: ```javascript let getQueryStringArgs = function() { // 取得没有开头问号的查询字符串 let qs = (location.search.length > 0 ? location.search.substring(1) : ""), // 保存数据的对象 args = {}; // 把每个参数添加到 args 对象 for (let item of qs.split("&").map(kv => kv.split("="))) { let name = decodeURIComponent(item[0]), value = decodeURIComponent(item[1]); if (name.length) { args[name] = value; } } return args; } // 假设查询字符串为?q=javascript&num=10 let args = getQueryStringArgs(); alert(args["q"]); // "javascript" alert(args["num"]); // "10" ``` ##### 12.2.2 **URLSearchParams** URLSearchParams 提供了一组标准 API 方法,通过它们可以检查和修改查询字符串。给URLSearchParams 构造函数传入一个查询字符串,就可以创建一个实例。大多数支持 URLSearchParams 的浏览器也支持将 URLSearchParams 的实例用作可迭代对象。 ```javascript et qs = "?q=javascript&num=10"; let searchParams = new URLSearchParams(qs); alert(searchParams.toString()); // " q=javascript&num=10" searchParams.has("num"); // true searchParams.get("num"); // 10 searchParams.set("page", "3"); alert(searchParams.toString()); // " q=javascript&num=10&page=3" searchParams.delete("q"); alert(searchParams.toString()); // " num=10&page=3" for (let param of searchParams) { console.log(param); } // ["q", "javascript"] // ["num", "10"] ``` ##### 12.2.3 操作方法 ```javascript //修改浏览器的地址,最常见的使用 assign()方法并传入一个 URL,这会立即启动导航到新URL,同时在浏览器历史记录中增加一条记录 location.assign("http://www.wrox.com"); //下面两行代码都会执行与显式调用 assign()一样的操作 window.location = "http://www.wrox.com"; location.href = "http://www.wrox.com"; //调用 replace()之后,用户不能回到前一页。 location.replace("http://www.wrox.com/") //重新加载当前显示的页面 location.reload(); // 重新加载,可能是从缓存加载 location.reload(true); // 重新加载,从服务器加载 ``` ### 12.3 navigator对象 375 > navigator 是由 Netscape Navigator 2 最早引入浏览器的,现在已经成为客户端标识浏览器的标准。只要浏览器启用 JavaScript,navigator 对象就一定存在。但是与其他 BOM 对象一样,每个浏览器都支持自己的属性。navigator 对象的属性通常用于确定浏览器的类型 ##### 12.3.1 检测插件 > 检测浏览器是否安装了某个插件是开发中常见的需求。除 IE10 及更低版本外的浏览器,都可以通过 plugins 数组来确定。 ```javascript //这个方法可以在Firefox、Safari、Opera 和 Chrome 中检测插件。 let hasPlugin = function(name) { name = name.toLowerCase(); for (let plugin of window.navigator.plugins){ if (plugin.name.toLowerCase().indexOf(name) > -1){ return true; } } return false; } // 检测 Flash alert(hasPlugin("Flash")); // 检测 QuickTime alert(hasPlugin("QuickTime")); ``` ##### 12.3.2 注册处理程序 >现代浏览器支持 navigator 上的(在 HTML5 中定义的)registerProtocolHandler()方法。这个方法可以把一个网站注册为处理某种特定类型信息应用程序。随着在线 RSS 阅读器和电子邮件客户端的流行,可以借助这个方法将 Web 应用程序注册为像桌面软件一样的默认应用程序。 ### 12.4 screen对象 379 >window 的另一个属性 screen 对象,是为数不多的几个在编程中很少用的 JavaScript 对象。这个对象中保存的纯粹是客户端能力信息,也就是浏览器窗口外面的客户端显示器的信息,比如像素宽度和像素高度。每个浏览器都会在 screen 对象上暴露不同的属性。 ```javascript availHeight 屏幕像素高度减去系统组件高度(只读) availLeft 没有被系统组件占用的屏幕的最左侧像素(只读) availTop 没有被系统组件占用的屏幕的最顶端像素(只读) availWidth 屏幕像素宽度减去系统组件宽度(只读) colorDepth 表示屏幕颜色的位数;多数系统是 32(只读) height 屏幕像素高度 left 当前屏幕左边的像素距离 pixelDepth 屏幕的位深(只读) top 当前屏幕顶端的像素距离 width 屏幕像素宽度 orientation 返回 Screen Orientation API 中屏幕的朝向 ``` ### 12.5 history对象 379 ##### 12.5.1 导航 ```javascript // 后退一页 history.go(-1); history.back(); // 前进一页 history.go(1); history.forward(); // 前进两页 history.go(2); // 导航到最近的 wrox.com 页面 history.go("wrox.com"); // 导航到最近的 nczonline.net 页面 history.go("nczonline.net"); ``` ##### 12.5.2 历史状态管理 > 现代 Web 应用程序开发中最难的环节之一就是历史记录管理。用户每次点击都会触发页面刷新的时代早已过去,“后退”和“前进”按钮对用户来说就代表“帮我切换一个状态”的历史也就随之结束了。为解决这个问题,首先出现的是 hashchange 事件。HTML5 也为history 对象增加了方便的状态管理特性。
顶部
收展
底部
[TOC]
目录
第1章 JavaScript简介
第2章 在 HTML中使用JavaScript
第3章 语言基础(1)语法变量
第3章 语言基础(2)数据类型
第3章 语言基础(3)操作符
第3章 语言基础(4)语句
第4章 变量、作用域与内存
第5章 基本引用类型
第6章 集合引用类型
第7章 迭代器与生成器
第8 章对象、类与面向对象编程
第9章 代理与反射
第10章 函数
第11章 期约与异步函数
第12章 BOM
第13章 客户端检测
第14章 DOM
第15章 DOM 扩展
第16章 DOM2 和 DOM3
第17章 事件
第18章 动画与 Canvas 图形
第19章 表单脚本
第20章 JavaScript API
第21章 错误处理与调试
第22章 处理 XML
第23章 JSON
第24章 网络请求与远程资源
第25章 客户端存储
第26章 模块
第27章 工作者线程
第28章 最佳实践
相关推荐
WebSocket