---恢复内容开始---

原理就是通过页面标签切换事件(visibilitychange)来判断,亦可用户移动端桌面和app切换。

先看代码:

 var hiddenProperty = 'hidden' in document ? 'hidden' :
          'webkitHidden' in document ? 'webkitHidden' :
          'mozHidden' in document ? 'mozHidden' :
          null;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function(){
  if (!document[hiddenProperty]) {
    console.log('页面激活');
  }else{
    console.log('页面隐藏')
  }
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);

pageshow和pagehide事件只会在页面加载和卸载,或者地址栏前进和后退的时候出现,不能检测到切换桌面的事件。

js判断移动端页面按home键切换到桌面事件的更多相关文章

  1. js判断移动端是否安装某款app的多种方法

    本文实例讲解了js判断移动端是否安装某款app的多种方法,分享给大家供大家参考,具体内容如下 第一种方法: 一:判断是那种设备 ? || u.indexOf(; //android终端或者uc浏览器 ...

  2. js 判断pc端或手机端

    <script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...

  3. JS 判断移动端与PC端

    js判断移动端与pc端   这里介绍下使用device.js插件来判断移动端设备 地址:https://github.com/matthewhudson/device.js 示例: 1 2 3 4 5 ...

  4. JS判断移动端还是PC端(改造自腾讯网) 仅用于宣传动画,下载页等

    JS判断移动端还是PC端(改造自腾讯网 http://www.qq.com/) 本脚本仅用于宣传动画,下载页( ipad 也算pc端)等,  ionic 用 ionic.platform 即可( io ...

  5. 跨平台移动开发_PhoneGap 再次点击返回键切换到桌面效果

    PhoneGap 再次点击返回键切换到桌面效果 相关代码 <!DOCTYPE html> <html> <head> <title> PhoneGap ...

  6. js判断移动端和PC端跳转不同页面

    方法一: /* * * 判断PC端与WAP端 */ var mobile_bs = { versions: function() { var u = navigator.userAgent; retu ...

  7. JS判断登陆端是PC还是手机

    前些天朋友问我怎么判断登陆端是PC还是手机...自己也是很困惑,然后自己查了资料,这些东西都藏在USER-AGENT里面,查了他的一些属性,写了一个简单的验证页面大家共同学习. 读取navigator ...

  8. JS判断移动端访问设备并加载对应CSS样式

    JS判断不同web访问环境,主要针对移动设备,提供相对应的解析方案(判断设备代码直接copy腾讯网的) // 判断是否为移动端运行环境 if(/AppleWebKit.*Mobile/i.test(n ...

  9. js判断移动端浏览器类型,微信浏览器、支付宝小程序、微信小程序等

    起因 现在市场上各种跨平台开发方案百家争鸣各有千秋,个人认为最成熟的还是hybird方案,简单的说就是写H5各种嵌入,当然作为前端工程师最希望的也就是公司采用hybird方案当作技术路线. 所谓的hy ...

随机推荐

  1. webpack快速入门——实战技巧:webpack模块化配置

    首先在根目录,新建一个webpack_config文件夹,然后新建entry_webpack.js文件,代码如下: const entry ={}; //声明entry变量 entry.path={ ...

  2. Alamofire源码导读二:发起请求及内部加锁的逻辑

    以创建一个 DataRequest 为例子  发起请求 创建 SessionManager 顺带也创建了一个 SessionDelegate 持有一个urlSession,持有一个串行的 Dispa ...

  3. BeautifulSoap库入门

    BeautifulSoup类的基本元素 基本元素 说明 Tag 标签,最基本的信息组织单元,分别用<>和</>标明开头和结尾 Name 标签的名字,<p>-< ...

  4. POJ 1083

    #include<iostream> #include<stdio.h> #include<algorithm> #define MAXN 400 using na ...

  5. PowerDesigner最基础的使用方法入门学习(转)

    PowerDesigner最基础的使用方法入门学习   1:入门级使用PowerDesigner软件创建数据库(直接上图怎么创建,其他的概念知识可自行学习) 我的PowerDesigner版本是16. ...

  6. 利用wget配合bash脚本同时下载多个文件

    先把需要下载的文件写入到一个文件中,命名为urls.txt,比如: http://blog.is36.com/a.jpg http://blog.is36.com/b.jpg http://blog. ...

  7. 为android游戏开发-准备的地图编辑器-初步刷地图

    采用多文理混合,单页面支持8张文理进行刷绘

  8. centos6 内网可达,外网不可达 Network is unreachable

    错误内容 [root@djx-2 yum.repos.d]# ping 3.0.82.21 connect: Network is unreachable [root@djx-2 yum.repos. ...

  9. tomcat安装以及常用配置

    目录 一 什么是tomcat 二 tomcat 的版本: 三 tomcat的下载 3.1 tomcat9版本下载链接 3.2 tomcat8.5版本下载链接 四 tomcat的安装 4.1 java环 ...

  10. gcc 混合连接动态库和静态库

    当对动态库与静态库混合连接的时候,使用-static会导致所有的库都使用静态连接的方式.这时需要作用-Wl的方式 gcc test.cpp -L. -Wl,-Bstatic -ltestlib  -W ...