JS监听浏览器TAB被激活或者被离开

监听窗口被离开或者被选中可以使用以下方法来实现

document.addEventListener('visibilitychange', function () {
    // 用户息屏、或者切到后台运行 （离开页面）
    if (document.visibilityState === 'hidden') {
        console.log('hidden')
    }
    // 用户打开或回到页面
    if (document.visibilityState === 'visible') {
        console.log('页面可见')
    }

实例

https://elearning.sjdc.net.cn:30000/#/student/my-course

https://elearning.sjdc.net.cn:30000/static/js/chunk-elementUI.e3431999.js

直接搜索visibilitychange

 visibilityChangeHandler: function() {
                        var e = this
                          , t = document.visibilityState;
                        "hidden" === t ? this.focusable = !1 : "visible" === t && setTimeout((function() {
                            e.focusable = !0
                        }
                        ), 50)
                    },
                        
                   mounted: function() {
                    var e = this;
                    Object(Ji["addResizeListener"])(this.$el, this.update),
                    document.addEventListener("visibilitychange", this.visibilityChangeHandler),
                    window.addEventListener("blur", this.windowBlurHandler),
                    window.addEventListener("focus", this.windowFocusHandler),
                    setTimeout((function() {
                        e.scrollToActiveTab()
                    }
                    ), 0)
                },
                beforeDestroy: function() {
                    this.$el && this.update && Object(Ji["removeResizeListener"])(this.$el, this.update),
                    document.removeEventListener("visibilitychange", this.visibilityChangeHandler),
                    window.removeEventListener("blur", this.windowBlurHandler),
                    window.removeEventListener("focus", this.windowFocusHandler)
                }

也可以直接在Chrome上查看

https://elearning.sjdc.net.cn:30000/static/js/chunk-commons.facf42be.js

mounted: function() {
                var e = this;
                setTimeout((function() {
                    e.bindTimeUpdateEvent()
                }
                ), 1e3)
            },
            methods: {
                bindTimeUpdateEvent: function() {
                    var e = this;
                    e.timeList = [],
                    e.courseResourceLibraryInfo && Object(s["q"])(e.courseResourceLibraryInfo.FastVideoName) && (document.getElementById("videoComponent").ontimeupdate = function() {
                        e.timeList.push(this.currentTime),
                        e.currentTime = this.currentTime,
                        e.duration = this.duration,
                        e.$emit("timeupdateVideo", {
                            timeList: e.timeList
                        }),
                        this.ended && (e.timeList = [])
                    }
                    )
                },