PageLifecycle.js

总览

英文源文档

PageLifecycle.js 是一个轻量化的 JavaScript 库（gzip后 < 1Kb），它让开发人员能够轻松观察页面生命周期API（Page Lifecycle API）状态的变化而无需担心浏览器的限制。

安装

npm install --save-dev page-lifecycle
1

使用方法

该库有三个生产版本：

1. ES5 dist/lifecycle.es5.js (UMD)

使用这个版本可以在最大限度地兼容那些(不能运行ES2015+代码)的就浏览器.

UMD 既可以在 CommonJS 或 AMD 环境中使用，也可以在浏览器中以<script>标签的形式引入。

<script defer src="/path/to/lifecycle.es5.js"></script>
<script defer>
lifecycle.addEventListener('statechange', function(event) {
  console.log(event.oldState, event.newState);
});
</script>
1
2
3
4
5
6

2. ES2015 dist/lifecycle.mjs (ESM)

如果您仅支持 ES module 浏览器或是正在使用 <script type="module"> 和 nomodule 有条件地支持现代浏览器，请使用此版本。

<script type="module">
import lifecycle from '/path/to/page-lifecycle.mjs';

lifecycle.addEventListener('statechange', function(event) {
  console.log(event.oldState, event.newState);
});
</script>
1
2
3
4
5
6
7

3. ES2015(native) dist/lifecycle.native.mjs (ESM 除EventTarget 和 Event以外的兼容版本) ⚠️

如果您只希望兼容那些支持扩展 EventTarget 和 Event 构造器的浏览器，请使用此版本。

请注意：这个版本是最小的，但也只能在一些浏览器中工作。其它和ES2015版本相同。

API

PageLifecycle.js 库导出的是 lifecycle对象，它是Lifecycle类的一个单例实例。Lifecycle类的属性、方法和事件如下：

属性

名称 类型 描述
state string 返回当前的页面生命周期状态。
pageWasDiscarded boolean 返回document.wasDiscarded的值（若不存在则返回false）

方法

名称 描述
addEventListener

参数：

  • type: string
  • listener: function(Event)

添加一个回调函数，以便在检测到传入的事件类型时调用(注意：目前只支持statechange。)

removeEventListener

参数：

  • type: string
  • listener: function(Event)

从当前侦听器列表中移除传入的事件类型函数(注意：目前只支持statechange。)

addUnsavedChanges

参数：

  • id: Object|Symbol

向内部调用栈添加监听项。调用此方法将向window添加一个 beforeunload 侦听器(在尚未添加的情况下).

传递的参数对该状态也是唯一的，因为只有向removeUnsavedChanges()传递相同的参数才能删除它。

removeUnsavedChanges

参数：

  • id: Object|Symbol

移除内部调用栈添加的监听项。如果调用栈为空，则从window移除beforeunload 侦听器

事件

名称 描述
statechange

属性：

  • newState: string 页面刚刚进入的当前生命周期状态。
  • oldState: string 前一个页面生命周期状态。
  • originalEvent: Event触发状态更改的DOM事件

每当页面的生命周期状态发生变化时，就会触发statechange事件。

浏览器支持情况

image