jSBOM对象

BOM对象

.1 浏览器对象模型（BOM）

浏览器对象模型（Browser Object Model）

BOM提供了独立于内容而与浏览器窗口进行交互的对象。
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window

BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM缺乏标准，javaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C

所有浏览器都支持 window对象。它表示浏览器窗口，是BOM的顶层（核心）对象，所有对象都是通过她延伸来的！

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EtEhC7tW-1578981850532)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1565922706306.png)]

五大对象:document对象,location对象,navigator对象,screen对象,history对象

document 文档对象— 整个浏览器窗口区域

History 从窗口被打开起的历史记录

Location 当前窗口中加载的文档有关的信息

Navigator 浏览器本身的信息，浏览器的版本、名称等等

Screen 有关客户端屏幕的信息

.2 window对象

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。
由于window对象是顶层对象，因此调用他的子对象时可以不显示的指明window对象，例如下面这俩行代码是一样的：

​ document.write(“今天天气真不错”);

​ window. document.write(“今天天气真不错”);

8.2.1 window尺寸

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth
或者

document.body.clientHeight
document.body.clientWidth
实用的 JavaScript 方案（涵盖所有浏览器）：

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

3 window方法

Window 对象方法

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
blur()	把键盘焦点从顶层窗口移开。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
close()	关闭浏览器窗口。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()	创建一个 pop-up 窗口。
focus()	把键盘焦点给予一个窗口。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
print()	打印当前窗口的内容。
prompt()	显示可提示用户输入的对话框。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

三个系统对话框

alert()、confirm()、prompt()

1.alert()

用于显示带有一条指定消息和一个确定按钮的警告框。

2.confirm()

用于显示一个带有指定消息和确定及取消按钮的对话框。

语法：confirm(message)

如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。

3.prompt()

用于显示可提示用户进行输入的对话框。

语法：prompt(text,defaultText)

text 可选。要在对话框中显示的纯文本。

defaultText 可选。默认的输入文本。

如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入文本框当前显示的文本。

window的打开窗口关闭窗口的方法

Open() close()

打开新窗口 window.open("url","窗口目标","宽高位置参数")
窗口移动到位置  moveTo(x,y)
窗口移动的尺寸: moveBy(x,y)
窗口的宽高尺寸  resizeTo(x,y)
窗口的宽高改变的尺寸 resizeBy(x,y)

4 Location 对象

location=“url网址”
location.hash 设置从井号开始的url,location.href 属性返回当前页面的 URL。

location.host 设置或返回主机名和当前的url端口
location.href 设置或返回完成的url

<script>

document.write(location.href);

</script

5 Navigator 对象

Navigator 对象，用来描述浏览器本身信息，浏览器的名称，版本，语言，系统平台，用户特性

​ appCodeName

Navigator 对象包含有关浏览器的信息。

appName 返回浏览器的名称。

appCodeName 返回浏览器的代码名称的字符串。

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

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

appVersion 返回浏览器的平台和版本信息。
userAgent– 用户代理头的字符串表示 – 可以判断您所用的系统平台 浏览器内核以及版本号

<div id="example"></div>

<script>

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

document.getElementById("example").innerHTML=txt;

</script>

注意：

​ navigator中最重要的是userAgent属性，返回浏览器版本等信息的字符串。

cookieEnabled可以判断用户浏览器是否开启了cookie

6Screen 对象

screen对象,包含有关客户端显示屏幕的信息
screen.availHeight 显示屏幕的高度(除window任务栏之外)
screen.availWidth 显示屏幕的宽度(除window任务栏之外)
bufferDepth 返回调色板的深度
colorDepth 返回目标设备或缓冲器上的调色的深度
screen.height;返回显示器的屏幕的高度

7. History 对象

history 保存着从窗口被打开起的历史记录
history.back() 返回上页
history.forward() 返回下一页

8.iframe框架

iframe> 标签规定一个内联框架。

一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

**提示：**您可以把需要的文本放置在 和 之间，这样就可以应对不支持 的浏览器。

**提示：**使用 CSS 为 （包括滚动条）定义样式。

javaScript也可以操作Iframe中的元素

9. cookie

Cookie 用于存储 web 页面的用户信息。

什么是 Cookie？

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:

• 当用户访问 web 页面时，他的名字可以记录在 cookie 中。
• 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

Cookie 以名/值对形式存储，如下所示:

username=John Doe

当浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

JavaScript 中，创建 cookie 如下所示：

document.cookie=“username=John Doe”;

还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie=“username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT”;

可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie=“username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/”;

---