JavaScript基础入门07

时间 2019-11-17

标签 javascript 基础入门栏目 JavaScript 繁體版

原文原文链接

目录javascript

JavaScript 基础入门07
- BOM

JavaScript 基础入门07

BOM

当js的运行环境为浏览器时，学习js应该将其分红三个部分:ECMAScript核心语法、BOM、DOM。html

BOM咱们能够将其称之为浏览器对象模型,主要描述了与浏览器进行交互的方法和接口。java

IE 3.0 和 Netscape Navigator 3.0 提供了一种特性 - BOM（浏览器对象模型），能够对浏览器窗口进行访问和操做。使用 BOM，开发者能够移动窗口、改变状态栏中的文本以及执行其余与页面内容不直接相关的动做。使 BOM 独树一帜且又经常使人怀疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的标准。跨域

BOM 主要处理浏览器窗口和框架，不过一般浏览器特定的 JavaScript 扩展都被看作 BOM 的一部分。这些扩展包括：数组

弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口大小
提供 Web 浏览器详细信息的定位对象
提供用户屏幕分辨率详细信息的屏幕对象
对 cookie 的支持
IE 扩展了 BOM，加入了 ActiveXObject 类，能够经过 JavaScript 实例化 ActiveX 对象

因为没有相关的 BOM 标准，每种浏览器都有本身的 BOM 实现。有一些事实上的标准，如具备一个窗口对象和一个导航对象，不过每种浏览器能够为这些对象或其余对象定义本身的属性和方法。浏览器

下面是一些BOM当中包含的对象。缓存

Window对象
Navigator对象
Screen对象
History对象
Location对象

window对象

浏览器里面，window对象（注意，w为小写）指当前的浏览器窗口。它也是当前页面的顶层对象，即最高一层的对象，全部其余对象都是它的下属。一个变量若是未声明，那么默认就是顶层对象的属性。安全

例如：服务器

a = 1;
window.a // 1

上面代码中，a是一个没有声明就直接赋值的变量，它自动成为顶层对象的属性。cookie

window有本身的实体含义，其实不适合看成最高一层的顶层对象，这是一个语言的设计失误。最先，设计这门语言的时候，原始设想是语言内置的对象越少越好，这样能够提升浏览器的性能。所以，语言设计者 Brendan Eich 就把window对象看成顶层对象，全部未声明就赋值的变量都自动变成window对象的属性。这种设计使得编译阶段没法检测出未声明变量，但到了今天已经没有办法纠正了。

window对象的属性

一、window.name

window.name属性是一个字符串，表示当前浏览器窗口的名字。窗口不必定须要名字，这个属性主要配合超连接和表单的target属性使用。

window.name = 'Hello World!';
console.log(window.name)
// "Hello World!"

该属性只能保存字符串，若是写入的值不是字符串，会自动转成字符串。各个浏览器对这个值的储存容量有所不一样，可是通常来讲，能够高达几MB。

只要浏览器窗口不关闭，这个属性是不会消失的。举例来讲，访问a.com时，该页面的脚本设置了window.name，接下来在同一个窗口里面载入了b.com，新页面的脚本能够读到上一个网页设置的window.name。页面刷新也是这种状况。一旦浏览器窗口关闭后，该属性保存的值就会消失，由于这时窗口已经不存在了。

二、window.closed,window.opener

window.closed属性返回一个布尔值，表示窗口是否关闭。

window.closed // false

上面代码检查当前窗口是否关闭。这种检查意义不大，由于只要能运行代码，当前窗口确定没有关闭。这个属性通常用来检查，使用脚本打开的新窗口是否关闭。

var popup = window.open();

if ((popup !== null) && !popup.closed) {
  // 窗口仍然打开着
}

咱们能够经过window.open方法打开一个新的网页。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button id="btn">点击打开</button>
</body>
<script>
 var btn = document.getElementById('btn');
 btn.onclick = function () {
  window.open('https://www.baidu.com')
 }
</script>
</html>

window.opener属性是一个可读可写的属性，可返回对建立该窗口的 Window 对象的引用。

当使用window.open()打开一个窗口，您可使用此属性返回来自目标窗口源（父）窗口的详细信息。

window.opener.close()将关闭源（父）窗口。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button id="btn">点击打开</button>
</body>
<script>
 var btn = document.getElementById('btn');
 btn.onclick = function () {
  var a = window.open('','','width=200,height=200');
  console.log(a.opener.document.write('hello,world'))
 }
</script>
</html>

也能够经过window.opener.close()关闭父源窗口。

a.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button id="btn">点击打开</button>
</body>
<script>
 var btn = document.getElementById('btn');
 btn.onclick = function () {
  var a = window.open('b.html','','width=200,height=200');
  console.log(a.opener.document.write('hello,world'))
 }
</script>
</html>

b.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button id="btn">点击</button>
</body>
<script>
 var btn = document.getElementById('btn');
 btn.onclick = function () {
  window.opener.close();
 }
</script>
</html>

若是当前窗口没有父源窗口，则返回null。

若是在两个窗口之间不须要通信，那么建议将window.opener属性设置为null,这样可以减小安全隐患。

zvar newWin = window.open('example.html', 'newWindow', 'height=400,width=400');
newWin.opener = null;

一旦属性设置为null，那么两个窗口之间将不在能通讯。

三、window.self 和 window.window

window.self和window.window属性都指向窗口自己。这两个属性只读。

window.self === window // true
window.window === window // true

四、位置大小属性

window.screenX ,window.screenY

window.screenX和window.screenY属性，返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离（单位像素）。这两个属性只读。

window.innerHeight，window.innerWidth

window.innerHeight和window.innerWidth属性，返回网页在当前窗口中可见部分的高度和宽度，即“视口”（viewport）的大小（单位像素）。这两个属性只读。

用户放大网页的时候（好比将网页从100%的大小放大为200%），这两个属性会变小。由于这时网页的像素大小不变（好比宽度仍是960像素），只是每一个像素占据的屏幕空间变大了，由于可见部分（视口）就变小了。

注意，这两个属性值包括滚动条的高度和宽度。

window.outerHeight，window.outerWidth

window.outerHeight和window.outerWidth属性返回浏览器窗口的高度和宽度，包括浏览器菜单和边框（单位像素）。这两个属性只读。

window.scrollX，window.scrollY

window.scrollX属性返回页面的水平滚动距离，window.scrollY属性返回页面的垂直滚动距离，单位都为像素。这两个属性只读。

注意，这两个属性的返回值不是整数，而是双精度浮点数。若是页面没有滚动，它们的值就是0。

举例来讲，若是用户向下拉动了垂直滚动条75像素，那么window.scrollY就是75左右。用户水平向右拉动水平滚动条200像素，window.scrollX就是200左右。

if (window.scrollY < 75) {
  window.scroll(0, 75);
}

上面代码中，若是页面向下滚动的距离小于75像素，那么页面向下滚动75像素。

window.pageXOffset，window.pageYOffset

window.pageXOffset属性和window.pageYOffset属性，是window.scrollX和window.scrollY别名。

五、组建属性

组件属性返回浏览器的组件对象。这样的属性有下面几个。

window.locationbar：地址栏对象
window.menubar：菜单栏对象
window.scrollbars：窗口的滚动条对象
window.toolbar：工具栏对象
window.statusbar：状态栏对象
window.personalbar：用户安装的我的工具栏对象

这些对象的visible属性是一个布尔值，表示这些组件是否可见。这些属性只读。

window.locationbar.visible
window.menubar.visible
window.scrollbars.visible
window.toolbar.visible
window.statusbar.visible
window.personalbar.visible

全局对象属性

全局对象属性指向一些浏览器原生的全局对象。

window.document：指向document对象
window.location：指向Location对象
window.navigator：指向Navigator对象
window.history：指向History对象
window.localStorage：指向本地储存的 localStorage 数据
window.sessionStorage：指向本地储存的 sessionStorage 数据
window.console：指向console对象，用于操做控制台
window.screen：指向Screen对象，表示屏幕信息

window.isSecureContext

window.isSecureContext属性返回一个布尔值，表示当前窗口是否处在加密环境。若是是 HTTPS 协议，就是true，不然就是false。

window对象的方法

window.alert()，window.prompt()，window.confirm()

window.alert()、window.prompt()、window.confirm()都是浏览器与用户互动的全局方法。它们会弹出不一样的对话框，要求用户作出回应。注意，这三个方法弹出的对话框，都是浏览器统一规定的式样，没法定制。

window.open(), window.close()，window.stop()

window.open方法用于新建另外一个浏览器窗口，相似于浏览器菜单的新建窗口选项。它会返回新窗口的引用，若是没法新建窗口，则返回null。

var popup = window.open('somefile.html');

上面代码会让浏览器弹出一个新建窗口，网址是当前域名下的somefile.html

open方法一共能够接受三个参数。

window.open(url, windowName, [windowFeatures])

url：字符串，表示新窗口的网址。若是省略，默认网址就是about:blank。
windowName：字符串，表示新窗口的名字。若是该名字的窗口已经存在，则占用该窗口，再也不新建窗口。若是省略，就默认使用_blank，表示新建一个没有名字的窗口。另外还有几个预设值，_self表示当前窗口，_top表示顶层窗口，_parent表示上一层窗口。
windowFeatures：字符串，内容为逗号分隔的键值对（详见下文），表示新窗口的参数，好比有没有提示栏、工具条等等。若是省略，则默认打开一个完整 UI 的新窗口。若是新建的是一个已经存在的窗口，则该参数不起做用，浏览器沿用之前窗口的参数。

例如：

var popup = window.open(
  'somepage.html',
  'DefinitionsWindows',
  'height=200,width=200,location=no,status=yes,resizable=yes,scrollbars=yes'
);

上面代码表示，打开的新窗口高度和宽度都为200像素，没有地址栏，但有状态栏和滚动条，容许用户调整大小。

第三个参数能够设定以下属性。

left：新窗口距离屏幕最左边的距离（单位像素）。注意，新窗口必须是可见的，不能设置在屏幕之外的位置。
top：新窗口距离屏幕最顶部的距离（单位像素）。
height：新窗口内容区域的高度（单位像素），不得小于100。
width：新窗口内容区域的宽度（单位像素），不得小于100。
outerHeight：整个浏览器窗口的高度（单位像素），不得小于100。
outerWidth：整个浏览器窗口的宽度（单位像素），不得小于100。
menubar：是否显示菜单栏。
toolbar：是否显示工具栏。
location：是否显示地址栏。
personalbar：是否显示用户本身安装的工具栏。
status：是否显示状态栏。
dependent：是否依赖父窗口。若是依赖，那么父窗口最小化，该窗口也最小化；父窗口关闭，该窗口也关闭。
minimizable：是否有最小化按钮，前提是dialog=yes。
noopener：新窗口将与父窗口切断联系，即新窗口的window.opener属性返回null，父窗口的window.open()方法也返回null。
resizable：新窗口是否能够调节大小。
scrollbars：是否容许新窗口出现滚动条。
dialog：新窗口标题栏是否出现最大化、最小化、恢复原始大小的控件。
titlebar：新窗口是否显示标题栏。
alwaysRaised：是否显示在全部窗口的顶部。
alwaysLowered：是否显示在父窗口的底下。
close：新窗口是否显示关闭按钮。

对于那些能够打开和关闭的属性，设为yes或1或不设任何值就表示打开，好比status=yes、status=1、status都会获得一样的结果。若是想设为关闭，不用写no，而是直接省略这个属性便可。也就是说，若是在第三个参数中设置了一部分属性，其余没有被设置的yes/no属性都会被设成no，只有titlebar和关闭按钮除外（它们的值默认为yes）

上面这些属性，属性名与属性值之间用等号链接，属性与属性之间用逗号分隔。

'height=200,width=200,location=no,status=yes,resizable=yes,scrollbars=yes'

另外，open()方法的第二个参数虽然能够指定已经存在的窗口，可是不等于能够任意控制其余窗口。为了防止被不相干的窗口控制，浏览器只有在两个窗口同源，或者目标窗口被当前网页打开的状况下，才容许open方法指向该窗口。

window.close方法用于关闭当前窗口，通常只用来关闭window.open方法新建的窗口。

popup.close()

window.stop()方法彻底等同于单击浏览器的中止按钮，会中止加载图像、视频等正在或等待加载的对象。

window.stop()

window.moveTo()，window.moveBy()

window.moveTo()方法用于移动浏览器窗口到指定位置。它接受两个参数，分别是窗口左上角距离屏幕左上角的水平距离和垂直距离，单位为像素。

window.moveTo(100, 200)

上面代码将窗口移动到屏幕(100, 200)的位置。

window.moveBy方法将窗口移动到一个相对位置。它接受两个参数，分布是窗口左上角向右移动的水平距离和向下移动的垂直距离，单位为像素。

window.moveBy(25, 50)

上面代码将窗口向右移动25像素、向下移动50像素。

为了防止有人滥用这两个方法，随意移动用户的窗口，目前只有一种状况，浏览器容许用脚本移动窗口：该窗口是用window.open方法新建的，而且它所在的 Tab 页是当前窗口里面惟一的。除此之外的状况，使用上面两个方法都是无效的。

window.resizeTo()，window.resizeBy()

window.resizeTo()方法用于缩放窗口到指定大小。

它接受两个参数，第一个是缩放后的窗口宽度（outerWidth属性，包含滚动条、标题栏等等），第二个是缩放后的窗口高度（outerHeight属性）。

window.resizeTo(
  window.screen.availWidth / 2,
  window.screen.availHeight / 2
)

上面代码将当前窗口缩放到，屏幕可用区域的一半宽度和高度。

window.resizeBy()方法用于缩放窗口。它与window.resizeTo()的区别是，它按照相对的量缩放，window.resizeTo()须要给出缩放后的绝对大小。

它接受两个参数，第一个是水平缩放的量，第二个是垂直缩放的量，单位都是像素。

window.resizeBy(-200, -200)

上面的代码将当前窗口的宽度和高度，都缩小200像素。

window.scrollTo()，window.scroll()，window.scrollBy()

window.scrollTo方法用于将文档滚动到指定位置。它接受两个参数，表示滚动后位于窗口左上角的页面坐标。

window.scrollTo(x-coord, y-coord)

它也能够接受一个配置对象做为参数。

window.scrollTo(options)

配置对象options有三个属性。

top：滚动后页面左上角的垂直坐标，即 y 坐标。
left：滚动后页面左上角的水平坐标，即 x 坐标。
behavior：字符串，表示滚动的方式，有三个可能值（smooth、instant、auto），默认值为auto。

window.scrollTo({
  top: 1000,
  behavior: 'smooth'
});

window.scroll()方法是window.scrollTo()方法的别名。

window.scrollBy()方法用于将网页滚动指定距离（单位像素）。它接受两个参数：水平向右滚动的像素，垂直向下滚动的像素。

window.scrollBy(0, window.innerHeight)

上面代码用于将网页向下滚动一屏。

若是不是要滚动整个文档，而是要滚动某个元素，可使用下面三个属性和方法。

Element.scrollTop
Element.scrollLeft
Element.scrollIntoView()

window.print()

window.print方法会跳出打印对话框，与用户点击菜单里面的“打印”命令效果相同。

常见的打印按钮代码以下。

document.getElementById('printLink').onclick = function () {
  window.print();
}

非桌面设备（好比手机）可能没有打印功能，这时能够这样判断。

if (typeof window.print === 'function') {
  // 支持打印功能
}

window.getSelection()

window.getSelection方法返回一个Selection对象，表示用户如今选中的文本

var selObj = window.getSelection();

使用Selection对象的toString方法能够获得选中的文本。

var selectedText = selObj.toString();

window.getComputedStyle()，window.matchMedia()

window.getComputedStyle()方法接受一个元素节点做为参数，返回一个包含该元素的最终样式信息的对象

window.matchMedia()方法用来检查 CSS 的mediaQuery语句

事件

window对象能够接收如下事件。

load 事件和 onload 属性

load事件发生在文档在浏览器窗口加载完毕时。window.onload属性能够指定这个事件的回调函数。

window.onload = function() {
  var elements = document.getElementsByClassName('example');
  for (var i = 0; i < elements.length; i++) {
    var elt = elements[i];
    // ...
  }
};

上面代码在网页加载完毕后，获取指定元素并进行处理。

error 事件和 onerror 属性

浏览器脚本发生错误时，会触发window对象的error事件。咱们能够经过window.onerror属性对该事件指定回调函数。

window.onerror = function (message, filename, lineno, colno, error) {
  console.log("出错了！--> %s", error.stack);
};

因为历史缘由，window的error事件的回调函数不接受错误对象做为参数，而是一共能够接受五个参数，它们的含义依次以下。

出错信息
出错脚本的网址
行号
列号
错误对象

老式浏览器只支持前三个参数。

并非全部的错误，都会触发 JavaScript 的error事件（即让 JavaScript 报错）。通常来讲，只有 JavaScript 脚本的错误，才会触发这个事件，而像资源文件不存在之类的错误，都不会触发。

下面是一个例子，若是整个页面未捕获错误超过3个，就显示警告。

window.onerror = function(msg, url, line) {
  if (onerror.num++ > onerror.max) {
    alert('ERROR: ' + msg + '\n' + url + ':' + line);
    return true;
  }
}
onerror.max = 3;
onerror.num = 0;

须要注意的是，若是脚本网址与网页网址不在同一个域（好比使用了 CDN），浏览器根本不会提供详细的出错信息，只会提示出错，错误类型是“Script error.”，行号为0，其余信息都没有。这是浏览器防止向外部脚本泄漏信息。一个解决方法是在脚本所在的服务器，设置Access-Control-Allow-Origin的 HTTP 头信息。

Access-Control-Allow-Origin: *

而后，在网页的<script>标签中设置crossorigin属性。

<script crossorigin="anonymous" src="//example.com/file.js"></script>

上面代码的crossorigin="anonymous"表示，读取文件不须要身份信息，即不须要 cookie 和 HTTP 认证信息。若是设为crossorigin="use-credentials"，就表示浏览器会上传 cookie 和 HTTP 认证信息，同时还须要服务器端打开 HTTP 头信息Access-Control-Allow-Credentials。

Navigator对象

window.navigator属性指向一个包含浏览器和系统信息的 Navigator 对象。脚本经过这个属性了解用户的环境信息。

Navigator.userAgent属性

navigator.userAgent属性返回浏览器的 User Agent 字符串，表示浏览器的厂商和版本信息。

经过userAgent属性识别浏览器，不是一个好办法。由于必须考虑全部的状况（不一样的浏览器，不一样的版本），很是麻烦，并且用户能够改变这个字符串。这个字符串的格式并没有统一规定，也没法保证将来的适用性，各类上网设备层出不穷，难以穷尽。因此，如今通常再也不经过它识别浏览器了，而是使用“功能识别”方法，即逐一测试当前浏览器是否支持要用到的 JavaScript 功能。

不过，经过userAgent能够大体准确地识别手机浏览器，方法就是测试是否包含mobi字符串。

var ua = navigator.userAgent.toLowerCase();

if (/mobi/i.test(ua)) {
  // 手机浏览器
} else {
  // 非手机浏览器
}

Navigator.plugins

Navigator.plugins属性返回一个相似数组的对象，成员是 Plugin 实例对象，表示浏览器安装的插件，好比 Flash、ActiveX 等。

var pluginsLength = navigator.plugins.length;

for (var i = 0; i < pluginsLength; i++) {
  console.log(navigator.plugins[i].name);
  console.log(navigator.plugins[i].filename);
  console.log(navigator.plugins[i].description);
  console.log(navigator.plugins[i].version);
}

Navigator.platform

Navigator.platform属性返回用户的操做系统信息，好比MacIntel、Win32、Linux x86_64等。

Navigator.onLine

navigator.onLine属性返回一个布尔值，表示用户当前在线仍是离线（浏览器断线）。

有时，浏览器能够链接局域网，可是局域网不能连通外网。这时，有的浏览器的onLine属性会返回true，因此不能假定只要是true，用户就必定能访问互联网。不过，若是是false，能够判定用户必定离线。

用户变成在线会触发online事件，变成离线会触发offline事件，能够经过window.ononline和window.onoffline指定这两个事件的回调函数。

window.addEventListener('offline', function(e) { console.log('offline'); });
window.addEventListener('online', function(e) { console.log('online'); });

Navigator.language，Navigator.languages

Navigator.language属性返回一个字符串，表示浏览器的首选语言。该属性只读。

navigator.language // "en"

Navigator.languages属性返回一个数组，表示用户能够接受的语言。Navigator.language老是这个数组的第一个成员。HTTP 请求头信息的Accept-Language字段，就来自这个数组。

navigator.languages  // ["en-US", "en", "zh-CN", "zh", "zh-TW"]

若是这个属性发生变化，就会在window对象上触发languagechange事件。

Navigator.geolocation

Navigator.geolocation属性返回一个 Geolocation 对象，包含用户地理位置的信息。注意，该 API 只有在 HTTPS 协议下可用，不然调用下面方法时会报错。

Geolocation 对象提供下面三个方法。

Geolocation.getCurrentPosition()：获得用户的当前位置
Geolocation.watchPosition()：监听用户位置变化
Geolocation.clearWatch()：取消watchPosition()方法指定的监听函数

注意，调用这三个方法时，浏览器会跳出一个对话框，要求用户给予受权。

Navigator.cookieEnabled

Navigator.cookieEnabled属性返回一个布尔值，表示浏览器的 Cookie 功能是否打开。

navigator.cookieEnabled // true

注意，这个属性反映的是浏览器总的特性，与是否储存某个具体的网站的 Cookie 无关。用户能够设置某个网站不得储存 Cookie，这时cookieEnabled返回的仍是true。

Screen 对象

Screen 对象表示当前窗口所在的屏幕，提供显示设备的信息。window.screen属性指向这个对象。

该对象有下面的属性。

Screen.height：浏览器窗口所在的屏幕的高度（单位像素）。除非调整显示器的分辨率，不然这个值能够看做常量，不会发生变化。显示器的分辨率与浏览器设置无关，缩放网页并不会改变分辨率。
Screen.width：浏览器窗口所在的屏幕的宽度（单位像素）。
Screen.availHeight：浏览器窗口可用的屏幕高度（单位像素）。由于部分空间可能不可用，好比系统的任务栏或者 Mac 系统屏幕底部的 Dock 区，这个属性等于height减去那些被系统组件的高度。
Screen.availWidth：浏览器窗口可用的屏幕宽度（单位像素）。
Screen.pixelDepth：整数，表示屏幕的色彩位数，好比24表示屏幕提供24位色彩。
Screen.colorDepth：Screen.pixelDepth的别名。严格地说，colorDepth 表示应用程序的颜色深度，pixelDepth 表示屏幕的颜色深度，绝大多数状况下，它们都是同一件事。
Screen.orientation：返回一个对象，表示屏幕的方向。该对象的type属性是一个字符串，表示屏幕的具体方向，landscape-primary表示横放，landscape-secondary表示颠倒的横放，portrait-primary表示竖放，portrait-secondary。

下面的例子保证屏幕分辨率大于 1024 x 768。

if (window.screen.width >= 1024 && window.screen.height >= 768) {
  // 分辨率不低于 1024x768
}

下面是根据屏幕的宽度，将用户导向不一样网页的代码。

if ((screen.width <= 800) && (screen.height <= 600)) {
  window.location.replace('small.html');
} else {
  window.location.replace('wide.html');
}

Location对象

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

History 对象

window.history属性指向History对象，表示当前窗口的浏览历史。

History对象保存了当前窗口访问过的全部的页面网址。下面代码表示当前窗口一共访问过3个网址。

window.history.length // 3

出于安全因素的考虑，浏览器不容许咱们读取这些地址，可是却容许经过指定的方法在地址之间进行导航。

// 后退到前一个网址
history.back()

// 等同于
history.go(-1)

浏览器工具栏的“前进”和“后退”按钮，其实就是对 History 对象进行操做。

属性

当前对象主要有两个属性。

History.length: 当前窗口访问过的网址数量(包括当前网页)
History.state : History 堆栈最上层的状态值

// 当前窗口访问过多少个网页
window.history.length // 1

// History 对象的当前状态
// 一般是 undefined，即未设置
window.history.state // undefined

方法

一、History.back()、History.forward()、History.go()

这三个方法用于在历史之中移动。

History.back()：移动到上一个网址，等同于点击浏览器的后退键。对于第一个访问的网址，该方法无效果。
History.forward()：移动到下一个网址，等同于点击浏览器的前进键。对于最后一个访问的网址，该方法无效果。
History.go()：接受一个整数做为参数，以当前网址为基准，移动到参数指定的网址，好比go(1)至关于forward()，go(-1)至关于back()。若是参数超过实际存在的网址范围，该方法无效果；若是不指定参数，默认参数为0，至关于刷新当前页面。

history.back();
history.forward();
history.go(-2);

history.go(0)至关于刷新当前页面。

history.go(0); // 刷新当前页面

注意，移动到之前访问过的页面时，页面一般是从浏览器缓存之中加载，而不是从新要求服务器发送新的网页。

二、History.pushState()

History.pushState()方法用于在历史中添加一条记录。

window.history.pushState(state, title, url)

该方法接受三个参数，依次为：

state：一个与添加的记录相关联的状态对象，主要用于popstate事件。该事件触发时，该对象会传入回调函数。也就是说，浏览器会将这个对象序列化之后保留在本地，从新载入这个页面的时候，能够拿到这个对象。若是不须要这个对象，此处能够填null。
title：新页面的标题。可是，如今全部浏览器都忽视这个参数，因此这里能够填空字符串。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

假定当前网址是example.com/1.html，使用pushState()方法在浏览记录（History 对象）中添加一个新记录。

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');

添加新记录后，浏览器地址栏马上显示example.com/2.html，但并不会跳转到2.html，甚至也不会检查2.html是否存在，它只是成为浏览历史中的最新记录。这时，在地址栏输入一个新的地址(好比访问google.com)，而后点击了倒退按钮，页面的 URL 将显示2.html；你再点击一次倒退按钮，URL 将显示1.html。

总之，pushState()方法不会触发页面刷新，只是致使 History 对象发生变化，地址栏会有反应。

使用该方法以后，就能够用History.state属性读出状态对象。

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');
history.state // {foo: "bar"}

若是pushState的 URL 参数设置了一个新的锚点值（即hash），并不会触发hashchange事件。反过来，若是 URL 的锚点值变了，则会在 History 对象建立一条浏览记录。

若是pushState()方法设置了一个跨域网址，则会报错。

// 报错
// 当前网址为 http://example.com
history.pushState(null, '', 'https://twitter.com/hello');

上面代码中，pushState想要插入一个跨域的网址，致使报错。这样设计的目的是，防止恶意代码让用户觉得他们是在另外一个网站上，由于这个方法不会致使页面跳转。

1. JavaScript基础入门07
2. Django基础入门07
3. JavaScript入门基础
4. JavaScript基础入门
5. javascript 入门基础
6. JavaScript 基础入门
7. Javascript入门基础
8. Javascript基础入门
9. 前端基础入门四（JavaScript基础）
10. JavaScript 入门基础 (七)
更多相关文章...
• Memcached入门教程 - NoSQL教程
• Kotlin 基础语法 - Kotlin 教程
• YAML 入门教程
• Java Agent入门实战（一）-Instrumentation介绍与使用