首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何判断JS Windows8 metro app是否可见

要判断JS Windows 8 Metro App是否可见,可以使用以下方法:

  1. 使用document.hidden属性:

document.hidden属性返回一个布尔值,表示当前文档是否隐藏。如果文档可见,则返回false,否则返回true。可以使用以下代码来判断Metro App是否可见:

代码语言:javascript
复制
if (!document.hidden) {
  // Metro App可见
} else {
  // Metro App不可见
}
  1. 使用window.onfocuswindow.onblur事件:

window.onfocus事件在窗口获得焦点时触发,window.onblur事件在窗口失去焦点时触发。可以使用以下代码来判断Metro App是否可见:

代码语言:javascript
复制
window.onfocus = function() {
  // Metro App可见
};

window.onblur = function() {
  // Metro App不可见
};
  1. 使用visibilitychange事件:

visibilitychange事件在文档的可见性发生变化时触发。可以使用以下代码来判断Metro App是否可见:

代码语言:javascript
复制
document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === 'visible') {
    // Metro App可见
  } else {
    // Metro App不可见
  }
});

需要注意的是,以上方法只能在支持HTML5的浏览器中使用。在不支持HTML5的浏览器中,可能需要使用其他方法来判断Metro App是否可见。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

ActivityLifecycleCallbacks如何判断APP是否在前台

本文为大家分享了ActivityLifecycleCallbacks如何判断APP是否在前台,供大家参考,具体内容如下 ActivityManager 通常情况下,我们判断app是否在前台都是通过 ActivityManager.../** * Activity是否在前台 * @param context * @return */ private boolean isOnForground(Context...这个功能可以用来做某种统计,或者弄成一个Activity链表可以知道前后Activity什么的,虽然目前还没遇到这种需求,当然了”判断APP是否在前台“这个功能算半个不过分吧。...生命周期 然后,为了达到 ”判断APP是否在前台“这个功能,我们需要先知道activity的生命周期。是不是很简单?...判断APP是否在前台 this.registerActivityLifecycleCallbacks(new ActivityLifecycleCallbacks() { @Override

1.9K40

如何快速判断一个用户是否访问过我们的 APP

DSP背景介绍 如何筛选优质流量是个难题,我们也在不断探索,现在想在程序入口让访问过我们 APP 的用户的这种流量(这种流量下面称作 RT 流量)优先通过筛选,但我们的程序入口 QPS 约 40w,且去重后的...RT 用户数是亿级别,假设 3 亿吧,用户信息是 32 位的字符串,如何快速判断一个用户是否访问过我们的 APP 呢?...欢迎在留言区说出你的方案,和牙哥一起探讨 分析 判断一个对象是否存在一般可以采用哈希表的方式,检索的平均时间复杂度是 O(1),但是哈希表比较耗内存,3 亿个 32 字节的数据占用约 9G (32 byte...这就需要一个映射表来做支持,,映射表可以使用 Redis,在流量过来后,先根据设置号查询映射表拿到 ID,然后再从 BitMap 中判断用户是否存在,流程如下图所示: ?...用Redis存映射信息的方案1 现在我们再看下这个方案,既然已经在 Redis 中存储了映射信息了,那根据 ID 通过 BitMap 来判断是否存在貌似是多余的,因为如果映射表中存在,说明用户就存在呀,

1.3K20

如何在 Node.js判断一个文件是否存在?

记录一些 Node.js 应用中的小知识点,如果你 Google/Baidu “Node.js 如何判断文件是否存在” 发现给出的很多答案还是使用的 fs.exists,这里不推荐使用 fs.exists...'存在' : '不存在'); }); 另外一个是 不推荐在 fs.open()、 fs.readFile() 或 fs.writeFile() 之前使用 fs.exists() 判断文件是否存在,因为这样会引起...其中有两个方法 stats.isDirectory()、stats.isFile() 用来判断是否是一个目录、是否是一个文件。...使用 fs.access fs.access 接收一个 mode 参数可以判断一个文件是否存在、是否可读、是否可写,返回值为一个 err 参数。...console.log(`${file} 存在,且可写`); } }); 同样的也不推荐在 fs.open()、 fs.readFile() 或 fs.writeFile() 之前使用 fs.exists() 判断文件是否存在

23.6K51

如何JS判断数组是否包含指定的元素(多种方法)

在处理数组时,我们经常需要在数组中查找特定的值,JavaScript 包含一些内置方法来检查数组是否有特定的值或对象。 今天,我们来一起看看如何检查数组是否包含特定值或元素。...检查数组是否包含一个基本类型的值 Arrya.includes() 方法 检查数组值的最简单方法是使用include()方法,如下所示: let animals = ["?", "?", "?"...// false 该函数返回一个布尔值,表示该值是否存在。...some() 方法 在搜索对象时,include()检查提供的对象引用是否与数组中的对象引用匹配。...总结 在本文中,我们介绍了在JavaScript中检查数组是否包含指定值的几种方法。 我们已经介绍了include()函数,它会在值存在时返回一个布尔值。

26.4K60

【干货】JS如何判断用户是否点击浏览器“退回”按钮返回上一个界面?

回到题目,我们怎么去判断用户是点击了“退回”按钮? 我们要用到一些取巧的办法。...仍然获得上下页信息关联 为history创建一个私有的记录值,用以区分history当前的state和上一个state(我们在事件回调中只能拿到当前state) 通过第一步和第二步铺垫的内容,在回调函数中进行判断...,从而知道是否是用户点击了“退回”按钮 接下来我们进行实施。...最后,我们通过latestState和当前的state进行对比,来猜测用户是否点击了“退回”按钮。...区分方法也很简单,你可以重写back和go方法,在里面做一个标记,从而在判断时增加对该标记的判断

6.3K50

如何使用Fluent Design System (下)

兼容旧版本 FDS最常见的问题之一是如何与Fall Creators Update之前的版本兼容,其实做起来也挺简单的,ColorfulBox就实现了Creators Update与Fall Creators...使用HamburgerMenu代替NavigationView UWP Community Toolkit中的HamburgerMenu是以前制作汉堡包导航菜单最常用的方案,升级到2.0版本以后它会判断运行的...本来这些问题一直都存在,只是以前应用少用户少,而且没有跨设备,也没有强制用户使用Metro,所以问题不明显。Windows8让这些问题一口气爆发,种种错误导致一个超前的UI慢慢落后。...我还记得Windows8刚出的时候对官方应用感到十分惊艳,可惜现在的官方应用很多连基本的用色和对齐都没做好,都足够做反面教材了。...本来关于Metro我还写了很多,但都删除了。写博客是为了传播新知识,无意为已经死去的Metro引起口水战。而且我对FDS已经喋喋不休抱怨了很多,再写下去就更像怨妇了。

1.2K20

React Native 启动速度优化——JS 篇(全网最全,值得收藏)

不过 React Native 的打包工具不是 webpack 而是 Facebook 自研的 Metro[2],虽然配置细节不一样,但道理是相通的,下面我就这几个点讲讲 React Native 如何优化...: false, // 是否需要驼峰转下划线 }, ], ], presets: ['module:metro-react-native-babel-preset'], };...; } 然后我们在 App.js 里 import 这个库: // App.js import { join } from 'my-module'; const App = (props) =>...iOS/Android 的 RN 容器如何实现多 bundle 加载? 2.3.1 JS Bundle 拆包 拆包之前要先了解一下 Metro 这个打包工具的工作流程。...具体的逻辑可见以下代码: // metro.business.config.js const fs = require('fs'); // 读取 idList.txt,转换为数组 const idList

2.4K40

Taro3.2 适配 React Native 之运行时架构详解

(https://mp.weixin.qq.com/s/-7G7NMHX8ol99QxkswFOxg) 直接基于源码去打包运行时适配,如何做适配,需要适配哪些内容?...Metro 是针对 React Native 的 JavaScript 模块打包工具,接收一个入口文件和打包配置,将项目中所有依赖打包在一个或多个js文件。...页面函数支持 对于微信的页面函数,根据页面config配置文件来控制是否触发, disableScroll 是否可滚动, enablePullDownRresh 是否开启下拉刷新。...进行前后台切换的时 实现上述函数,基本思路: App前后台切换时,通过监听 AppState 的状态变化,状态切换的变化,可判断是从前台到后台,从而来触发对应的函数 我们的路由导航系统是基于 React...Navigation, 页面切换时,导航提供了页面聚焦和是失去焦点时触发 focus 与 blur 事件,通过监听这两个事件,判断当前页面是否可见来触发对应函数 Current对象 在 Taro

2.5K30

用于 Windows8 的 Wijmo Charts 图表控件

随着Windows 8 Developer Preview 和 Visual Studio 11 Preview的发布, 大家对Metro-style的关注也逐步升温。...我打算试着把它放到Windows 8里,准确的说,我尝试利用Wijmo的Charts实现一个Windows 8下的Metro UI 应用程序。...图2:Default Project Template for Win8 App 当我打开project,这些都是VS自动加载的。...现在我们只考虑如何使用的问题以及它是否稳定。 ? 图3:添加Wijmo和jQuery文件到工程 需要注意的是,这些文件都必须打包到应用程序中,所以CDN不可用。...一个Metro app就立刻呈现眼前(Hold住!)一个漂亮的SVG Chart(矢量图表)就出现了。如果你跟我一样,也是个Web程序员,那么现在,你已经会创建Windows 8 app了。 ?

2.7K60

设计师会编程、程序员懂艺术:Semi Flat Design

主要技术栈: nodejs、react native、electron 本号正在更新的系列有: 写给设计师的人工智能指南 移动App设计之xxxx 数据爬取及可视化系列 技能之xxxx 读书笔记 还有其他杂文...扁平化案例,微软的Metro Design ? Metro Design是平面设计领域最经典的案例,让文字实现了近乎完美的视觉传达。...微软的设计师受到了Metro的启发,创作了微软的Metro UI。 ?...Metro UI,也叫Modern UI、Windows8 Style UI,是微软基于设计语言设计的一种界面风格,此设计在创造之后被用于移动操作系统Windows Phone、Windows 8、Xbox...ps:打个小广告,上图也是我最近在开发的 JS Playground For Designer的一个工具的界面效果。

2.4K60

React Native 拆包原理和实践

内存溢出( CRN 维护了5个上限的 bridge) 不重启 APP 的情况下更新 bundle很方便,只需要重新指定路径加载或者执行 reload 占用内存多 二、基础包和业务包的拆分 1、metro...介绍和打包流程 metro 是一种支持 ReactNative 的打包工具,我们现在也是基于他来进行拆包的,metro 打包流程分为以下几个步骤: Resolution:Metro 需要从入口点构建所需的所有模块的图...,要从另一个文件中找到所需的文件,需要使用 Metro 解析器。...观察一下原生 Metro 代码的node_modules/metro/src/lib/createModuleIdFactory.js 文件,代码为: function createModuleIdFactory...由于拆分成了多个 bundle,路由表散落在了多个bundle 中,不同 bundle 之间如何跳转。

4.7K21
领券