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