BOM，（Browser Object Model），浏览器对象

浏览器模型BOM

一、window对象

window不仅充当全局作用域，而且表示浏览器窗口

	现代浏览器	老版浏览器
窗口内高度（除去了菜单栏、工具栏等等）	innerHeight	document.documentElement.clientHeight 或 document.body.clientHeight
窗口内宽度	innerWidth	document.documentElement.clientWidth 或document.body.clientWidth
窗口高度	OuterHeight
窗口宽度	outerWidth

通过高度公式：var w = window.innerWidth || document.documentElement.clientWidt || document.body.clientWidth;

常用方法

方法	作用	用法示例
window.alert	弹出对话框，通知消息，只有一个确定按钮。参数只能是一个字符串	alert(‘本条提示\n分成两行’)
window.prompt	弹出对话框，要求输入信息，有“确定”、“取消”两个按钮，用来获取用户输入 参数一：提示文字，参数二：默认值	var result = prompt(‘年龄？’,25)
window.confirm	弹出对话框，有“确定”、“取消”两个按钮，用来征询用户是否同意	var result = confirm(‘你最近好吗？’)

二、Navigator、Screen对象

Navigator

记录浏览器的信息，常用属性如下：

字段	说明	示例
navigator.appName	浏览器名称	‘Netscape’（网景公司名称）
navigator.appCodeName	应用程序代码名称	‘Mozilla’（现在是一个社区名称）
navigator.appVersion	浏览器版本	’5.0‘
navigator.platform	操作系统类型	‘Win32’
navigator.language	浏览器设置的语言	‘zh-CN’
navigator.userAgent[1]	浏览器设定的User-Agent字符串，用户代理
navigator.cookieEnabled	cookie 是否已启用	true / false
navigator.product	引擎名称（内核）	‘Gecko’
navigator.onLine	浏览器是否在线	true

[1]: User-Agent 用户代理，是Http协议的一部分，属于http头部的组成部分。网站服务器通过它来识别用户使用的 操作系统版本、CPU类型、浏览器版本等信息，

Screen

Screen 对象表示当前窗口所在的屏幕，提供显示设备的信息

screen.width	屏幕宽度
screen.availWidth	可用宽度
screen.height	屏幕高度
availHeight	可用高度
screen.colorDepth	色深，颜色的比特数
screen.pixelDepth	像素深度，对于现代计算机，颜色深度和像素深度是相等的

三、History对象

window.history属性指向 History 对象，它表示当前窗口的浏览历史。History 对象保存了当前窗口访问过的所有页面网址。如果 URL 的锚点值变了，会在 History 对象创建一条浏览记录

属性

属性
length	当前窗口访问过的网址数量（包括当前网页）
state	History 堆栈最上层的状态值

方法

方法
back()	移动到上一个网址，等同于点击浏览器的后退键，第一个网页无效
forward()	移动到下一个网址，等同于点击浏览器的前进键，最后一个网页无效
go()	接受一个整数作为参数，以当前网址为基准，移动到参数指定的网址，如go(1)、go(-1)
pushState(state, title, url)	用于在历史中添加一条记录
replaceState(state, title, url)	修改 History 对象的当前记录

history.pushState({page: 1}, 'title 1', '?page=1')
// URL 显示为 http://example.com/example.html?page=1
history.pushState({page: 2}, 'title 2', '?page=2');
// URL 显示为 http://example.com/example.html?page=2
history.replaceState({page: 3}, 'title 3', '?page=3');
// URL 显示为 http://example.com/example.html?page=3
history.back()
// URL 显示为 http://example.com/example.html?page=1
history.back()
// URL 显示为 http://example.com/example.html
history.go(2)
// URL 显示为 http://example.com/example.html?page=3

popState事件

每当同一个文档的浏览历史（即history对象）出现变化时，就会触发popstate事件，back()、forward()、go()方法会触发该事件（另外2个方法不触发）。popState用于指定回调函数

window.addEventListener('popstate', function(event) {
  console.log('location: ' + document.location);
  console.log('state: ' + JSON.stringify(event.state));
});

参考文章：浏览器模型 - History 对象 - 《阮一峰 JavaScript 教程》 - 书栈网 · BookStack

四、Location对象

Location对象是浏览器提供的原生对象，提供 URL 相关的信息和操作方法。通过window.location和document.location属性，可以拿到这个对象。

属性

href	整个url	http://user:passwd@www.example.com:4097/path/a.html?x=111#part1
protocol	URL协议，包括冒号	http:
host	主机	www.example.com:4097
hostname	主机名，不含端口	www.example.com
port	端口	4097
pathname	url的路径部分，从/开始	/path/a.html
search	查询字符串，从?开始	?x=11
hash	锚点部分，从#开始	#part1
origin（只读）	协议、主机名+端口	http://user:passwd@www.example.com:4097
username	域名前面的用户名	user
password	域名前面的密码	passwd

可以发现，Location对象属性，与URL的组成紧密相关

除了origin属性是只读的，其它属性都可读写。修改href，浏览器会立即跳转到新地址，这个特性常常用于滚动到新锚点

document.location = 'http://www.example.com';
// 等同于
document.location.href = 'http://www.example.com';

另外，Location.href属性是浏览器唯一允许跨域写入的属性，即非同源的窗口可以改写另一个窗口（比如子窗口与父窗口）的Location.href属性，导致后者的网址跳转。Location的其他属性都不允许跨域写入。

方法

assign()	接受一个 URL 字符串作为参数，使得浏览器立刻跳转到新的 URL
replace()	接受一个 URL 字符串作为参数，使得浏览器立刻跳转到新的 URL，会在History中删除原来的地址
reload()	浏览器重新加载当前网址，相当于刷新。接受一个boolean参数，true-从服务器请求加载，false-从本地缓存加载
toString()	返回整个 URL 字符串

五、Blob对象

Binary Large Object （二进制大型对象）。表示一个二进制文件的数据内容，用于操作二进制文件，通常用来读写文件，如图片

Blob()构造函数

new Blob(array [, options])

• 参数一，数组，成员是字符串或二进制对象，表示新生成的Blob实例对象的内容
• 参数二，可选，是一个配置对象，目前只有一个属性type，它的值是一个字符串，表示数据的 MIME 类型，默认是空字符串

var obj = { hello: 'world' };
var blob = new Blob([ JSON.stringify(obj) ], {type : 'application/json'});

实例属性
size	数据大小
type	数据类型

实例方法
slice(start, end, contentType)	拷贝原来的数据，返回一个新的Blob实例，3个参数都是可选的

六、File、FileList、FIleReader

1、File对象

代表一个文件，用来读写文件信息，继承自Blob

构造函数

new File(array, name [, options])

• array：一个数组，成员可以是二进制对象或字符串，表示文件的内容。
• name：字符串，表示文件名或文件路径。
• options：配置对象，设置实例的属性。该参数可选。
  • type，字符串类型，表示实例的 MIME 类型，默认为空字符串
  • lastModified，时间戳，默认为Date.now()，表示上次修改的时间

扩展：MIME

MIME 类型 - HTTP | MDN (mozilla.org)

实例属性

• File.lastModified：最后修改时间
• File.name：文件名或文件路径
• File.size：文件大小（单位字节）
• File.type：文件的 MIME 类型

File 对象没有自己的实例方法，由于继承了 Blob 对象，因此可以使用 Blob 的实例方法slice()

2、FileList对象

类似数组的对象，代表一组选中的文件，每个成员都是一个 File 实例，主要出现在两种场合：

• 文件控件节点（<input type="file">）的files属性，返回一个 FileList 实例。
• 拖拉一组文件时，目标区的DataTransfer.files属性，返回一个 FileList 实例。

3、FileReader对象

用于读取 File 对象或 Blob 对象所包含的文件内容

var reader = new FileReader();

实例属性
result	读取完成后的文件内容，有可能是字符串，也可能是一个 ArrayBuffer 实例
readyState	表示读取文件时的当前状态。一共有三种可能的状态 0表示尚未加载任何数据，1表示数据正在加载，2表示加载完成

监听事件属性
onabort	abort事件（用户终止读取操作）的监听函数
onloadstart
onloadend
onload	load事件（读取操作完成）的监听函数，通常在这个函数里面使用result属性，拿到文件内容
onerror	error事件（读取错误）的监听函数
onprogress	progress事件（读取操作进行中）的监听函数

实例方法
abort()	终止读取操作，readyState属性将变成2
readAsArrayBuffer()	以 ArrayBuffer 的格式读取文件，读取完成后result属性将返回一个 ArrayBuffer 实例
readAsBinaryString()	读取完成后，result属性将返回原始的二进制字符串
readAsDataURL()	读取完成后，result属性将返回一个 Data URL 格式（Base64 编码）的字符串 对于图片文件，这个字符串可以作为img标签的src属性。但这个字符串不能直接作为Base64解码
readAsText()	读取完成后，result属性将返回文件内容的文本字符串。 该方法的第一个参数是代表文件的 Blob 实例，第二个参数是可选的，表示文本编码，默认为 UTF-8

实例：读取文本文件

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
    <div>
        <input type="file" onchange="readfile(this.files[0])">
        <pre id='output'></pre>
    </div>
    <script>
        function readfile(f) {
            var reader = new FileReader();
            reader.readAsText(f);
            reader.onload = function () {
                var text = reader.result;
                var out = document.getElementById('output');
                out.innerHTML = '';
                out.appendChild(document.createTextNode(text));
            }
            reader.onerror = function (e) {
                console.log('Error', e);
            }
        }
    </script>
</body>
</html>