JavaScript高级程序设计(读书笔记)之BOM
BOM(Browser Object Model)提供了很多对象用于访问浏览器的功能,这些功能与任何网页内容无关。
8.1 window对象
BOM的核心对象是window,它表示一个浏览器实例。在浏览器中,window对象有双重角色,window对象既是JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。
8.1.1 全局作用域
所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。
全局变量不能通过delete操作符删除,而直接在window对象上定义的属性可以。
尝试访问未声明的变量会抛出错误,但是通过查询window对象可以知道某个可能未声明的变量是否存在。
8.1.2 窗口关系及框架
网页中每个框架都有自己独立的window对象,并保存在frames集合中,通过基于0的索引,从做左到右,从上到下或者框架名称访问相应的window对象,window.name是框架名称。
top对象始终指向最外层的框架,也就是浏览器窗口
parent对象指向当前框架的直接上层框架。
self对象始终指向window,可以互换使用。
这些属性都是windw对象的属性。
8.1.3 窗口位置
Firefox、Safari、Chrome提供了screenX和screenY属性,IE、Safari、Opera、Chrome提供了screenLeft和screenTop属性,分别表示窗口相对于屏幕左边和上边的位置。
moveTo()接收两个参数:新位置的x,y坐标值;
moveBy()接受两个参数:水平和垂直方向上移动的像素数。这两个方法都不适用于框架,只能对最外层的window对象使用。
8.1.4 窗口大小
outerWidth、outerHeight返回浏览器本身的尺寸。
innerWidth、innerHeight返回浏览器页面视图容器的大小。
chorome中,均返回浏览器页面视图容器的大小。
IE8及更早版本没有提供获取当前浏览器窗口尺寸的属性,可通过DOM获取。
document.documentElement.clientWidth和document.documentElement.clientHeight保存了页面视口的信息,标准模式下有效。
在混杂模式下,必须通过documnent.body.clientWidth和document.body.clientHeight取得相同信息。chrome都可以获取。
resiziTo()和resizeBy()可以调整浏览器窗口大小。
resiziTo()接收浏览器窗口的新宽度和新高度,resizeBy()接收新窗口与原窗口的宽度与高度之差。
8.1.5 导航与打开窗口
1 window.open()可以导航到一个特定的URL,也可以打开一个新的浏览器窗口。接收四个参数:
(要加载的URL,窗口目标,一个特性字符串,一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值)
通常只传递第一个参数,最后一个参数在不打开新窗口的情况下使用。小学六年级英语第二个参数是已有窗口或框架的名称。
2 window.open()第三个参数:一个逗号分隔的字符串,表示新窗口中都显示哪些特性。
fullscreen(yes、no)、height(数值)、left、top、width、scrobare(yes、no)等等,以名值对表示:”height=400,resizeble=yes”。
3 window.open()返回一个指向新窗口的引用。
4 window.close()可以关闭新打开的窗口,该方法仅适用于通过window.open()打开的新窗口。
8.1.6 超时调用和间歇调用
1
间歇调用是在指定的时间过后执行代码,使用window.setTimeout()方法,接受两个参数:(要执行的代码,执行代码前需要等待的毫秒数)。eg:setTimeout(function(){},1000);
在经过指定时间后代码不一定会执行,因为JavaScript是一个单线程序的解释器,因为一定时间内只能执行一段代码,第二个参数告诉JavaScript再经过多少时间把当前任务添加到任务队列中。方法返回一个数值,表示超时调用ID,可以通过调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它,从而取消尚未执行的超时调用代码。
2
间歇调用是指每隔指定的时间就就执行一次代码,调用方式与超时调用一致。使用setInterval(),返回一个间歇调用ID,使用clearInterval()方法传入相应间歇调用ID。
一般使用超时调用来模拟间歇调用是一种最佳模式。
8.1.7 系统对话框
浏览器通过alert()、confirm()、prompt()方法调用系统对话框向用于显示消息,外观由操作系统和浏览器设置决定,不由CSS决定。
1 alert()生成警告。没有返回值。
2 confirm()会显示两个按钮:确认、取消,返回布尔值。
3
prompt()生成提示框,提示用于输入一些文本,显示:确认、取消、本文框。接受两个参数:(显示给用户的文本提示,文本输入域的默认值),返回输入域的值。
8.2 location对象
location对象是最有用的BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,雅思简介还提供了一些导航功能。location对象提供了与当前窗口中加载的文档有关的信息,还将URL解析为独立的片段:hash、host、hostname、href、pathname、port、protocol、search。设置相应的属性,可以逐段或者整体性地修改浏览器的URL。
window.location与document.location引用的是同一对象。
位置操作:location对象可以通过很多方式改变浏览器位置。其中最常用的方法是设置location.href属性
使用assign()方法并为其传递一个URL,可以立即打开新URL并在浏览器的历史记录中生成一条记录(可以后退),将window.location或location.href设置为一个URL值,也会调用assign()方法。
要禁止后退,可以调用replace()方法,接受导航到的URL参数,且不会在历史记录中生成新记录。
reload()方法以最有效重载当前显示的页面,会从浏览器缓存中重新架子啊,看气质强制服务器重新加载,传递参数true。
8.3 navigator对象
主要用来识别客户端浏览器。eg:navigator.userAgent;返回用户代理字符串。
8.3.1 检测插件
navigator.plugins;返回浏览器中安装的插件信息的数组,数组中每一项包含下列属性:
name:插件名字;
descripttion:插件的文件名;
filename:插件的文件名;
length:插件所处理的MIME类型数量。
IE检测插件的唯一方式是使用专有的ActiveXObject类型,并尝试创建一个特定插件的实例。
8.3.2 注册处理程序
Firefox为navigator对象增加了registerContentHandler()和registerProtocolHandle()方法,可以让一个站点指明它可以处理特定类型的信息。
registerContentHandler()接受三个参数:(要处理的MIME类型,可以处理该MIME类型的页面URL,应用程序名称)。registerProtocolHandle()接受三个参数:(要处理的协议,处理该协议的页面URL,应用程序的名称)
8.4 screen对象
screen对象只用来表明客户端能力,包括浏览器窗口外部的显示器信息,如像素宽度和高度。在测定客户端能力的站点跟踪工具中常用。调整浏览器窗口的大小,使其占据屏幕的可用空间,例如:
许多浏览器禁用调整浏览器窗口大小的能力,因此上面代码不一定在所有环境下都是适用的。
8.5 history对象
history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起,sat阅读分数表但是无法得知用户浏览过的URL,可以借用用户访问过的页面列表,实现后退和前进。
history.go()方法可以在用户历史记录中跳转,接受一个参数:表示向后或者向前跳跃的页面数的一个整数值。负数表示向后跳转,整数表示向前跳转。
也可以传给go()方法一个字符串参数,此时浏览器会跳转到历史记录中包含该字符串的第一个位置——可能后退,也可能前进,具体看哪个位置最近。如果不包含该参数,则什么方法也不做。
history.back()和history.forward()模仿浏览器的后退和前进按钮。
history.length保存着历史记录的数量。
补充:
- top对象始终指向最外围的框架,也就是整个浏览器窗口。
- parent对象表示包含当前框架的框架,而self对象则回指window。
JavaScript高级程序设计(读书笔记)之BOM的更多相关文章
- javascript高级程序设计读书笔记-事件(一)
读书笔记,写的很乱 事件处理程序 事件处理程序分为三种: 1.html事件2. DOM0级,3,DOM2级别 没有DOM1 同样的事件 DOM0会顶掉html事件 因为他们都是属性 而 ...
- javascript高级程序设计读书笔记
第2章 在html中使用javascript 一般都会把js引用文件放在</body>前面,而不是放在<head>里, 目的是最后读取js文件以提高网页载入速度. 引用js文 ...
- JavaScript高级程序设计 读书笔记
第一章 JavaScript 简介 第二章 Html中使用JavaScript 第三章 基本概念 第四章 变量,作用域,内存 第五章 引用类型 第六章 面向对象 第七章 函数表达式 第八章 BOM 第 ...
- Javascript高级程序设计读书笔记(第六章)
第6章 面向对象的程序设计 6.2 创建对象 创建某个类的实例,必须使用new操作符调用构造函数会经历以下四个步骤: 创建一个新对象: 将构造函数的作用域赋给新对象: 执行构造函数中的代码: 返回新 ...
- 《JavaScript高级程序设计》笔记:BOM(八)
BOM(浏览器对象模型)提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关. window对象 全局作用域 定义全局变量与在window对象上直接定义属性还是有一点差别:全局变量不能通过 ...
- JavaScript高级程序设计-读书笔记(7)
第22章 高级技巧 1.高级函数 (1)安全的类型检测 在任何值上调用Object原生的toString()方法,都会返回一个[object NativeConstructorName]格式的字符串. ...
- JavaScript高级程序设计-读书笔记(3)
第8章 BOM 1.window对象 (1)全局作用域 BOM的核心对象是window,它表示浏览器的一个实例.在浏览器中,window对象既是通过JavaScript访问浏览器窗口的一个接口,又是E ...
- JavaScript高级程序设计-读书笔记(1)
第1章 JavaScript简介 JavaScript是一种专为与网页交互而设计的脚本语言,由下列三个不同的部分组成: l ECMAScript:提供核心语言功能: l 文 ...
- JavaScript高级程序设计 读书笔记 第一章
JavaScript是一种专门为与网页交互而设计的脚本语言 JavaScript实现 ECMAscript---核心 DOM---文档对象模型 BOM---浏览器对象模型
- Javascript高级程序设计读书笔记(第二章)
第二章 在HTML中使用Javascript 2.1<script>元素 延迟脚本(defer = "defer")表明脚本在执行时不会影响页面的构造,脚本会被延迟到 ...
随机推荐
- 第四篇--Beyond Compare4 试用期30天后
30天后删除BCUnrar.dll这个文件,继续使用30天.还有就是注册表中regedit-->HEKY_CURRENT_USER-->Software-->Scooter Soft ...
- pip批量安装库
将需要安装的库名和版本号都写在一个txt文档中,每个库名占一行,例如requests==2.24.0. 然后在用pip install -r命令去找到这个txt文档批量安装里面填写的库,如果嫌速度太慢 ...
- 研究java ResultSet结果集
java的结果集,实现类D:\storage\respository\com\sinosoft\local\oracle\1.0\oracle-1.0.jar!\oracle\jdbc\driver\ ...
- ifix中嵌入3d模型初探(一)
在ifix项目中插入3d模型,是当前工控上位机的一个发展趋势,故而我也来尝尝鲜.利用现有条件,初步打算完成一个工厂俯视3d全景. 基本思路:利用webbrowser+3dmax+three.js来嵌入 ...
- Go语言基础知识总结(持续中)
Go基础知识总结 变量声明 Go语言中的变量需要声明以后才可以使用(需要提前定义变量)并且声明后必须使用(不适用会报错) 标准声明 var 变量名 变量类型 example: var name str ...
- SickOs1.2靶机
仅供个人娱乐 靶机信息 靶机下载地址:https://www.vulnhub.com/entry/sickos-12,144/一.主机发现 arp-scan -l 二.端口扫描 1. masscan ...
- K8S系列第八篇(Service、EndPoints以及高可用kubeadm部署)
更多精彩内容请关注微信公众号:新猿技术生态圈 更多精彩内容请关注微信公众号:新猿技术生态圈 更多精彩内容请关注微信公众号:新猿技术生态圈 Endpoints 命名空间级资源,如果endpoints和s ...
- python中map()和reduce()的使用
map() 会根据提供的函数对指定序列做映射.map(function, iterable, ...)Python 3.x 返回迭代器.print(map()) 返回迭代器地址一般和list一起用 才 ...
- Android面试6家一线大厂,这个问题是必问!
年后面了六家大厂,每家都会问的一个问题就是Android的消息机制!可见Android的消息机制是多么重要! 消息机制之所以这么重要是因为Android应用程序是通过消息来驱动的,Android某种意 ...
- 985硕艰难转行Android之路 加面经分享
个人情况介绍 本人为某末流985工科硕士,说来令人感慨,我的考研之路异常曲折,每次都觉得自己能十拿九稳,结果每次都阴差阳错,失之交臂,第一次因为那年目标院校大幅度提升初试线,导致差一分未过线,第二次换 ...