zoukankan      html  css  js  c++  java
  • 一些常用js方法汇总

    1.判断当前网站是否被打开且是激活可见状态,是否被别的窗口遮住?

    /** 判断当前网站是否被打开,适配不同浏览器,返回不同的监听事件等 */
    export function isHideDocument() {
      let hidden; let state; let visibilityChange;
      if (typeof document.hidden !== 'undefined') {
        hidden = 'hidden';
        visibilityChange = 'visibilitychange';
        state = 'visibilityState';
      } else if (typeof document.mozHidden !== 'undefined') {
        hidden = 'mozHidden';
        visibilityChange = 'mozvisibilitychange';
        state = 'mozVisibilityState';
      } else if (typeof document.msHidden !== 'undefined') {
        hidden = 'msHidden';
        visibilityChange = 'msvisibilitychange';
        state = 'msVisibilityState';
      } else if (typeof document.webkitHidden !== 'undefined') {
        hidden = 'webkitHidden';
        visibilityChange = 'webkitvisibilitychange';
        state = 'webkitVisibilityState';
      }
      return { hidden, visibilityChange, state }
    }
    View Code
    // 如何使用该方法展示
     // 获取和监听页面状态
          const isHideDocumentInit = isHideDocument(); //获取当前运行浏览器适配的名字;
          let isHide = document[isHideDocumentInit.state];//是否当前是非激活状态
          this.$store.commit('SET_DOCUMENT_IS_HIDE', isHide === 'hidden')
          document.addEventListener(isHideDocumentInit.visibilityChange, () => { //添加是否可视的监听
            isHide = document[isHideDocumentInit.state]
            this.$store.commit('SET_DOCUMENT_IS_HIDE', isHide === 'hidden')
          }, false);
  • 相关阅读:
    JavaScript + HTML 虚拟键盘效果
    HTML + JS随机抽号。
    JavaScript 鼠标划过 播放音乐。
    JavaScript 笔记
    HTML5 div+css导航菜单
    div错位/解决IE6、IE7、IE8样式不兼容问题
    HTML5-表单的创建
    HTML5-布局的使用
    HTML5-块元素标签的使用
    HTML5-列表的使用
  • 原文地址:https://www.cnblogs.com/chun321/p/15433131.html
Copyright © 2011-2022 走看看