JS監聽瀏覽器TAB被激活或者被離開

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 = [])
                    }
                    )
                },

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章