主要是利用两个API:
document.onvisibilitychange
<判断页面可见性> 和
window.onbeforeunload
visibilitychange Events
visibilitychange
事件是浏览器新添加的一个事件，当浏览器的某个标签页切换到后台，或从后台切换到前台时就会触发该消息，现在主流的浏览器都支持该消息了，例如Chrome, Firefox, IE10等。在google浏览器中测试，关闭浏览器也可以触发这个事件
Example: 在文档可见时开始播放音乐曲目，在文档不再可见时暂停音乐。
document .addEventListener ("visibilitychange" , function () {
if (document .visibilityState === 'visible' ) {
backgroundMusic.play ();
} else {
backgroundMusic.pause ();
浏览器兼容性
Window: beforeunload event
onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。
该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。
对话框默认的提示信息根据不同的浏览器有所不同，标准的信息类似 "确定要离开此页吗？"。该信息不能删除。
若想在关闭刷新状态前执行弹窗，根据规范，要显示确认对话框，事件处理程序需要在事件上调用preventDefault()
将字符串分配给事件的returnValue属性
从事件处理程序返回一个字符串。
Example:
window .addEventListener ('beforeunload' , (event ) => {
event.preventDefault ();
event.returnValue = '' ;
浏览器兼容性
页面加载完成调用
mounted () {
if (typeof document .addEventListener === "undefined" ) {
console .error ("浏览器不支持addEventListener,请升级" );
} else {
window .addEventListener ("visibilitychange" , () => {
if (document .visibilityState == "hidden" ) {
this .websocket .close ()
window .addEventListener ("beforeunload" , () => {
this .websocket .close ()
延伸 widow & document
捕获阶段 window 优先于document
冒泡阶段 document 优先于window
萌萌哒草头将军
Vue.js
JavaScript
1.2w
sorryhc
JavaScript
React.js
10.8w
_island
JavaScript
掘金·金石计划
5.5w
zxg_神说要有光
JavaScript
4300
Android
Android Studio
