js（七）——BOM之BOM API

Web API

Web API介绍

API的概念

API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。

• 任何开发语言都有自己的API

• API的特征输入和输出(I/O)

• API的使用方法(console.log())

Web API的概念

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

此处的Web API特指浏览器提供的API(一组方法)，Web API在后面的课程中有其它含义

---

BOM

BOM的概念

BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，

比如：刷新浏览器、后退、前进、在浏览器中输入URL等

window对象包括六个子对象：document，frames，history，location，navigator，screen

window对象窗口处理

document对象窗口中加载的文档处理（该对象的属性和方法都很少用或不用！）

frames对象窗口的多个框架布局（该对象也不用！）

history对象处理浏览器的浏览历史

location对象处理当前文档的URL

navigator对象提供浏览器的相关信息

screen对象提供显示器的信息（窗口大小，分辨率）

BOM的顶级对象window

window是浏览器的顶级对象，当调用window下的属性和方法时，可以省略window

window对象属性和方法：（除常用属性和方法外，其他属性和方法由于某些浏览器考虑性能安全问题，给禁用了）

属性：

closed    返回窗口是否已被关闭。
defaultStatus    设置或返回窗口状态栏中的默认文本。
document    对 Document 对象的只读引用。(请参阅对象)
frames    返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。
history    对 History 对象的只读引用。请参数 History 对象。
innerHeight    返回窗口的文档显示区的高度。
innerWidth    返回窗口的文档显示区的宽度。
localStorage    在浏览器中存储 key/value 对。没有过期时间。
length    设置或返回窗口中的框架数量。
location    用于窗口或框架的 Location 对象。请参阅 Location 对象。
name    设置或返回窗口的名称。
navigator    对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener    返回对创建此窗口的窗口的引用。
outerHeight    返回窗口的外部高度，包含工具条与滚动条。
outerWidth    返回窗口的外部宽度，包含工具条与滚动条。
pageXOffset    设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset    设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent    返回父窗口。
screen    对 Screen 对象的只读引用。请参数 Screen 对象。
screenLeft    返回相对于屏幕窗口的x坐标
screenTop    返回相对于屏幕窗口的y坐标
screenX    返回相对于屏幕窗口的x坐标
sessionStorage    在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据。
screenY    返回相对于屏幕窗口的y坐标
self    返回对当前窗口的引用。等价于 Window 属性。
status    设置窗口状态栏的文本。
top    返回最顶层的父窗口。

console.log('窗口是否关闭：'+window.closed);
console.log('框架数量：'+window.length);
console.log('文档区域宽高：'+window.innerWidth + ',' + window.innerHeight);
console.log('窗口外部宽高（含工具条和滚动条）：'+window.outerWidth + ',' + window.outerHeight);
console.log('返回相对于屏幕窗口的位置'+window.screenX + ',' + window.screenY);

方法：

属性      描述
alert()    显示带有一段消息和一个确认按钮的警告框。
atob()    解码一个 base-64 编码的字符串。
btoa()    创建一个 base-64 编码的字符串。
blur()    把键盘焦点从顶层窗口移开。
clearInterval()    取消由 setInterval() 设置的 timeout。
clearTimeout()    取消由 setTimeout() 方法设置的 timeout。
close()    关闭浏览器窗口。
confirm()    显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()    创建一个 pop-up 窗口。
focus()    把键盘焦点给予一个窗口。
getSelection()    返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
getComputedStyle()    获取指定元素的 CSS 样式。
matchMedia()    该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。
moveBy()    可相对窗口的当前坐标把它移动指定的像素。
moveTo()    把窗口的左上角移动到一个指定的坐标。
open()    打开一个新的浏览器窗口或查找一个已命名的窗口。
print()    打印当前窗口的内容。
prompt()    显示可提示用户输入的对话框。
resizeBy()    按照指定的像素调整窗口的大小。
resizeTo()    把窗口的大小调整到指定的宽度和高度。
scroll()    已废弃。 该方法已经使用了 scrollTo() 方法来替代。
scrollBy()    按照指定的像素值来滚动内容。
scrollTo()    把内容滚动到指定的坐标。
setInterval()    按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()    在指定的毫秒数后调用函数或计算表达式。
stop()    停止页面载入。

对话框

• alert()

window.alert("警告弹框");

• prompt()

var str = window.prompt("提示语：请输入文字！", "默认值");

• confirm()

var str = window.confirm("是否确认这条信息！");

窗口打开和关闭

• open()

open(URL, window_name, params)

window.open("../index.html");
window.open("../index.html", "JD主页");
window.open("../index.html", "JD主页", "height=500px, left=500px");

params：窗体的特征

属性	描述
channelmode=yes|no|1|0	是否使用剧院模式显示窗口。默认为 no。
directories=yes|no|1|0	是否添加目录按钮。默认为 yes。
fullscreen=yes|no|1|0	是否使用全屏模式显示浏览器。默认是 no。 处于全屏模式的窗口必须同时处于剧院模式。
height=pixels	窗口文档显示区的高度。以像素计。
left=pixels	窗口的 x 坐标。以像素计。
location=yes|no|1|0	是否显示地址字段。默认是 yes。
menubar=yes|no|1|0	是否显示菜单栏。默认是 yes。
resizable=yes|no|1|0	窗口是否可调节尺寸。默认是 yes。
scrollbars=yes|no|1|0	是否显示滚动条。默认是 yes。
status=yes|no|1|0	是否添加状态栏。默认是 yes。
titlebar=yes|no|1|0	是否显示标题栏。默认是 yes。
toolbar=yes|no|1|0	是否显示浏览器的工具栏。默认是 yes。
top=pixels	窗口的 y 坐标。
width=pixels	窗口的文档显示区的宽度。以像素计。

features是open方法的第三个参数，以字符串的形式表示，多个特征之间使用”，“分隔，特征只能在窗口未打开 之前定义，窗口打开后不能通过特征改变窗口的外观 

 

定时器

setTimeout()和clearTimeout()

在指定的毫秒数到达之后执行指定的函数，只执行一次

// 创建一个定时器，1000毫秒后执行，返回定时器的标示
var timerId = setTimeout(function () {
  console.log('Hello World');
}, 1000);                //第一个参数三种写法：函数名（不带括号），字符串（写函数带括号），匿名函数
​
// 取消定时器的执行
clearTimeout(timerId);

setInterval()和clearInterval()

定时调用的函数，可以按照给定的时间(单位毫秒)周期调用函数（每隔指定时间调用）

// 创建一个定时器，每隔1秒调用一次
var timerId = setInterval(function () {
  var date = new Date();
  console.log(date.toLocaleTimeString());
}, 1000);                    第一个参数三种写法：函数名（不带括号），字符串（写函数带括号），匿名函数
​
// 取消定时器的执行
clearInterval(timerId);


案例：clearInterval一定要写在被调用函数体，因为JavaScript是单线程，一旦阻塞就在本方法找机会跳出
    var i = 1;
    function f() {
        alert(i++);
        if (i == 4) {
            window.clearInterval(val);
        } 
    }
    var val = window.setInterval(f, 1000);

frames对象

frameset标签的使用：

    <frameset rows="50%,50%" cols="*" frameborder="yes" border="1" framespacing="0">
        <frameset rows="*" cols="33%,*,33%" framespacing="0" frameborder="yes" border="1">
            <frame src="left.htm" name="left" id="left" />
            <frame src="middle.htm" name="middle" id="middle">
            <frame src="right.htm"name="right" id="right">
        </frameset>
        <frame src="bottom.htm" name="bottom" id="bottom">
    </frameset>
    <noframes><body></body></noframes>

location对象

location对象是window对象下的一个属性，使用的时候可以省略window对象

location可以获取或者设置浏览器地址栏的URL

URL

统一资源定位符 (Uniform Resource Locator, URL)

• URL的组成

scheme://host:port/path?query#fragment
scheme:通信协议
    常用的http,ftp,maito等
host:主机
    服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
port:端口号
    整数，可选，省略时使用方案的默认端口，如http的默认端口为80。
path:路径
    由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。
query:查询
    可选，用于给动态网页传递参数，可有多个参数，用'&'符号隔开，每个参数的名和值用'='符号隔开。例如：name=zs
fragment:信息片断
    字符串，锚点.

location有哪些成员？

• 使用chrome的控制台查看

• 查MDN

  MDN

• 成员

  • assign()(加载指定的文档)/reload()(刷新页面)/replace()(将当前的文档替换成)

  • hash/host/hostname/search/href……

可以在Location对象上使用以下方法：

方法	描述
assign()	加载新文档
reload()	重新加载当前文档
replace()	用新的文档替换当前文档

 

history对象

• back()

​//看过的上一个页面
history.back();

• forward()

//看过的下一个页面
history.forward();

• go()

//看过的某一个页面
history.go(-1);
history.go(2);
history.go("www.baidu.com");

navigator对象

• userAgent

通过userAgent可以判断用户浏览器的类型

• platform

通过platform可以判断浏览器所在的系统平台类型.