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

原理就是通过页面标签切换事件(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. centos6.5 yum安装lamp

    准备篇: 1.清空防火墙 iptables -F 或者关闭防火墙 /etc/init.d/iptables stop,如果要防火墙开机不要启动 chkconfig iptables off 2.关闭S ...

  2. 一:My Batis快速入门

    ---恢复内容开始--- 一.Mybatis介绍 MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检 ...

  3. absolute

    在需要用到小图标时,可以使用position:absolute,它具有消除float和位置不变特性.使用absolute可以浮现在同级元素的上方.用margin进行精确定位即可,也不必使用top,le ...

  4. Java基础梳理(一)

    List和Set比较,各自的子类比较 对比一:Arraylist与LinkedList的比较 1.ArrayList是实现了基于动态数组的数据结构,因为地址连续,一旦数据存储好了,查询操作效率会比较高 ...

  5. c malloc分配内存

    php中的内存分配有用类似emalloc这样的函数,emalloc实际上是C语言中的malloc的一层封装,php启动后,会向OS申请一块内存,可以理解为内存池,以后的php分配内存都是在这块内存池中 ...

  6. R软件常用命令

    1.getwd()      获取默认的目录 2.> mydata <- read.csv("1.csv")  读取1.csv文件中的数据,并赋值给一个mydata的对 ...

  7. 微信小程序web-view(webview) 嵌套H5页面 唤起微信支付的实现方案

    场景:小程序页面有一个web-view组件,组件嵌套的H5页面,要唤起微信支付. 先讲一下我的项目,首先我是自己开发的一个H5触屏版的商城系统,里面含有购物车,订单支付等功能.然后刚开始,我们公众号里 ...

  8. Redis客户端使用

    http://wenku.baidu.com/view/6ccd650af12d2af90242e63d.html 一.下载jedis 代码 jedis 代码地址:https://github.com ...

  9. Ruby on Rails Mountable vs. Full Engine

    原文 :https://www.travisluong.com/ruby-on-rails-mountable-vs-full-engine/一个Rails Engine 本质是一个 Rails ap ...

  10. mongodb与关系型数据库优缺点比较

    1.与关系型数据库相比,MongoDB的优点:①弱一致性(最终一致),更能保证用户的访问速度②文档结构的存储方式,能够更便捷的获取数据③内置GridFS,支持大容量的存储.④内置Sharding.⑤第 ...