第七次前端预习

目录

一.BOM简介

二.window对象

三.location对象

四.navigator对象

五.screen对象

六.history对象

---

一.BOM简介

BOM（Browser Object Model）允许 JavaScript 与浏览器对话。不存在浏览器对象模型（BOM）的官方标准。现代的浏览器已经（几乎）实现了 JavaScript 交互相同的方法和属性。

总之，和浏览器进行交互的对象架构就是BOM。

二.window对象

1.窗口关系与框架

如果页面中包含框架，则每个框架都拥有自己的 window 对象，并且保存在 frames 集合中。在 frames集合中，可以通过数值索引（从 0 开始，从左至右，从上到下）或者框架名称来访问相应的 window 对象。每个 window 对象都有一个 name 属性，其中包含框架的名称。
top对象：始终指向最高层的框架，即浏览器窗口，使用它可以确保在一个框架中正确地访问另一个框架。

parent对象：始终指向当前框架的直接上层框架，在某些情况下，parent 有可能等于 top；但在没有框架的情况下，parent 一定等于top（此时它们都等于 window）。

self对象：始终指向自身框架

2.窗口的位置

screenLeft、screenTop属性:IE、 Safari、 Opera和Chrome支持

screenX、screenY属性:Firefox、Safari、Chrome支持

分别表示窗口相对于屏幕左边和上边的位置。

移动窗口方法：

moveTo(距屏幕左边距离，距屏幕上边距离):moveTo(0,0)将窗口移到屏幕左上角

moveBy(左右，上下):moveBy(-50,0)将窗口左移50

3.窗口的大小

innerWidth、innerHeight、outerWidth和outerHeight四个属性IE9+、Firefox、Safari、Opera和Chrome均支持，但表示的含义不尽相同。

①在 IE9+、Safari和Firefox中，outerWidth和outerHeight返回浏览器窗口本身的尺寸（无论是从最外层的 window 对象还是从某个框架访问）。
②在Opera中，outerWidth和outerHeight的值表示页面视图容器（Opera中单个标签页对应的浏览器窗口）的大小。而innerWidth和innerHeight则表示该容器中页面视图区的大小（减去边框宽度）。
③在Chrome中，outerWidth、outerHeight与innerWidth、innerHeight返回相同的值，即视口大小而非浏览器窗口大小。

调整窗口大小方法：

resizeTo(长，高)：resizeTo(100,100)100X100

resizeBy(增加的长，增加的高)

4.打开新窗口

语法：window.open(URL,name,features);

URL：一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。

name ：一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记<a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么open()方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。

features  ：一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。在<窗口特征>这个表格中，我们对该字符串的格式进行了详细的说明。
常用features：

height、width    窗口文档显示区的高度、宽度。以像素计。
left、top    窗口的x坐标、y坐标。以像素计
toolbar=yes | no  是否显示浏览器的工具栏。黙认是yes。
scrollbars=yes | no  是否显示滚动条。黙认是yes。
location=yes | no    是否显示地址地段。黙认是yes。
status=yes | no   是否添加状态栏。黙认是yes。
menubar=yes | no   是否显示菜单栏。黙认是yes。
resizable=yes | no   窗口是否可调节尺寸。黙认是yes。
titlebar=yes | no    是否显示标题栏。黙认是yes。
fullscreen=yes | no   是否使用全屏模式显示浏览器。黙认是no。

5.间歇与超时调用

①超时调用setTimeout(需要执行的代码，代码运行后经过的时间)

②间歇调用setInterval(需要执行的代码，代码执行间隔时间)

需要执行的代码推荐以函数的形式写入

6.对话框

alert(警告框)：通常用于向用户显示一些他们无法控制的信息

confirm(确认框)：通常用于让用户确定执行某个操作

prompt(提示框)：用于提示用户输入信息

三.location对象

1.属性
location.href    获取或者设置 整个URL
location.host    返回主机域名
location.port    返回端口号 如果未写返回空字符串
location.pathname    返回路径
location.search    返回参数
location.hash    返回片段 #后面内容 常见于链接 锚点

2.刷新页面

location.assign()：跟href一样，可以跳转页面（也称为重定向页面）

location.replace()：替换当前页面，因为不记录历史，所以不能后退页面

location.reload()：重新加载页面，相当于刷新按钮或者f5；如果参数为true强制刷新 ctrl+f5

四.navigator对象

1.属性：

appCodeName 返回浏览器的代码名

appName 返回浏览器的名称

appVersion 返回浏览器的平台和版本信息

cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值

platform 返回运行浏览器的操作系统平台

userAgent 返回由客户机发送服务器的user-agent 头部的值

2.方法

javaEnabled() 指定是否在浏览器中启用Java

五.screen对象

属性：

availHeight    窗口可以使用的屏幕高度，单位像素
availWidth    窗口可以使用的屏幕宽度，单位像素
colorDepth    用户浏览器表示的颜色位数，通常为32位(每像素的位数)
pixelDepth    用户浏览器表示的颜色位数，通常为32位(每像素的位数)（IE不支持此属性）
height    屏幕的高度
width    屏幕的宽度

六.history对象

方法：

go():若是负数表示向后跳转，正数表示向前跳转，数值表示跳转的次数

forward():前进一页

back():后退一页