W3C 文档 https://www.w3.org/TR/page-visibility/ MDN 文档 https://www.w3.org/TR/page-visibility/ // Document.visibilityState 可以监听用户是否离开页面,在返回页面 var t1, {log} = console; document.addEventListener("visibilitychange", function() { if(this.visibilityStat…

页面可见性: 就是对于用户来说,页面是显示还是隐藏, 所谓显示的页面,就是我们正在看的页面:隐藏的页面,就是我们没有看的页面. 因为,我们一次可以打开好多标签页面来回切换着,始终只有一个页面在我们眼前,其他页面就是隐藏的,还有一种就是,把浏览器最小化,所有的页面就都不可见了. API 很简单,document.hidden 就返回一个布尔值,如果是true, 表示页面可见,false 则表示,页面隐藏.  不同页面之间来回切换,触发visibilitychange事件. 还有一个document…

概述 哈哈,又学了一个H5的API.今天突然对动态获取网页的选中状态很感兴趣,然后去查了下,发现真的有个API控制它--Page Visibility API.于是把学到的东西记录下来,供以后开发时参考,相信对其他人也有用. 具体可以参考:MDN Page Visibility API 示例 立刻把这个API用到了我的博客上面了.怎么查看效果呢? 确保浏览器是最新版本(IE要IE10以上). 打开我的博客,然后点击浏览器的其它标签,就可以看到我的博客网页的标签的标题变成了(●-●)喔哟,崩溃啦!…

起因 最近浏览36kr 的网页的时候偶然发现一个有趣的情况:当浏览器Tab 处于非当前页的时候,36kr 的标题栏会自动换成可爱的大白字符形象.Jeff 在第一次看到的时候就知道这种效果是通过HTML5 的Page Visibility API 实现的(不是吹牛). 直到现在我还没去查看36kr 的源代码看其是如何实现的(也不打算去一个个查看它繁杂的js 文件了),HTML5 的Page Visibility API 以前看过,看到36kr 实现了这个的时候一时兴起,遂去查看文档深入了解之.然后…

在code review时看见同事使用visibilitychange 事件来监听页面的隐藏与显示,之前没有了解过这块,学习一下. document.visibilityState 主要有以下3个状态: hidden:页面彻底不可见. visible:页面至少一部分可见. prerender:页面即将或正在渲染,处于不可见状态. hidden状态和visible状态是所有浏览器都支持的.prerender状态仅支持预渲染的浏览器 注意:The Page Visibility API define…

H5 提供了很多简单实用的 API,Page Visibility API 就是其中之一. 不知道用户是不是在与页面交互,这是困扰广大 Web 开发人员的一个主要问题.如果 页面最小化了 或者 隐藏在了其他标签页后面,那么有些功能是可以停下来的,比如轮询服务器或者某些动画效果.那么如何判断呢? H5 之前,我们可以监听 onfocus() 事件.如果当前窗口得到焦点,那么我们可以简单认为用户在与该页面交互,如果失去焦点(onblur()),那么可以认为用户停止与该页面交互. // 当前窗口得到焦…

一.网页君的悲情谁来懂 唉,突然想到了一首悲情诗: 泪湿罗巾梦不成,夜深前殿按歌声.红颜未老恩先断, 斜倚薰笼坐到明. 学生时代学过的一首诗,已还给老师不知所云的诸位可参见下面释义: 诗的主人公是一位不幸的宫女.她一心盼望君王的临幸而终未盼得,时已深夜,只好上床,已是一层怨怅.宠幸不可得,退而求之好梦:辗转反侧,竟连梦也难成,见出两层怨怅.梦既不成,索性揽衣推枕,挣扎坐起.正当她愁苦难忍,泪湿罗巾之时,前殿又传来阵阵笙歌,原来君王正在那边寻欢作乐,这就有了三层怨怅.倘使人老珠黄,犹可解说:偏偏她…

页面1  HTML代码: <p id="loginInfo"></p> JS代码: (function() {     if (typeof pageVisibility.hidden !== "undefined") {         var eleLoginInfo = document.querySelector("#loginInfo");         var funLoginInfo = function(…

什么是 Page Visibility ? Page Visibility 即页面可见性,通过 visibilityState 的值检测页面当前是否可见.当一个网站是可见或点击选中的状态时 Page Visibility API 可以让你获取到这种状态,当用户最小化网页或者浏览到其他标签的网页时,API将发送一个关于当前页面的可见信息的事件vibilitychange.你可以检测该事件然后执行一些活动或是展示不同的效果.这个API在节约资源上是非常有用的,当网页不可见时,这个API通过提供给开发…

0.前言 HTML5 Page Visibility API是一个很实用的特性.当页面对用户不可见时,暂停播放页面中的视频.动画.声音.以及其它耗费内存的操作,等用户回来时.再继续这些操作. 当然,最好提醒下用户能够继续回到本页面上来,本文研究利用改变页面tab(title)实现提醒. 前言 效果预览 代码解析 实现过程 兼容性分析 学习资源 声明 效果预览 代码解析 实现过程 实现过程很easy,侦听visibilitychange事件,然后改变页面标题. var title = docume…

这个是今天刚发现的,想起之前那个在页面用video标签视频播放,别人切换页面后仍在继续播放,体验很不好,用这个API就可以很完美的解决. Page Visibility API 可以让你获取到这种状态.在用户使用切换标签的方式来浏览网页时,非常合理的情况是任何在后台页面都不会展示给用户. 当用户最小化网页或者浏览到其他标签的网页时,API将发送一个关于当前页面的可见信息的事件visibilitychange.你可以检测该事件然后执行一些活动或是展示不同的效果.比如,如果你的网站app正在播放一个…

1.Page Visibility API标准概述 查看W3C的官方文档时候看到这个属性 标准时间线是这样介绍的: Page Visibility Level 2 W3C Proposed Recommendation 17 October 2017 查看W3C的工作流程的时候可以看到应该是处于W3C提议推荐的阶段,虽然还没有被完全的推荐成为标准,并且不是每一款浏览器都有所支持,但还是值得研究一下. 2.定义 顾名思义这是一个页面可见性API. 简单的说,浏览器标签页被隐藏或显示的时候会触发vi…

Page Visibility 会在浏览器的 document 对象上添加两个属性 hidden 和 visibilityState .如果当前的标签被激活了,那么 document.hidden 的值为 false ,否则为 true .visibilityState 则有4个可能值 1.hidden:当浏览器最小化.切换标签.电脑锁屏时 visibilityState 值是 hidden2.visible:当浏览器最顶级上下文(context)的 document 至少显示在一个屏幕当中时,…

几年前,我们浏览网页的时候是没有选项卡浏览模式的,每一个网页都会是一个浏览器窗口,如果我没有记错,Win7之前我们都是这样浏览网页的.作为一个程序员,我们经常会同时打开10-15个网页,多的时候超过20个也不足为奇. 为什么要使用这个API? 早期我们没有办法确定哪些选项卡是活动状态的,但是现在通过HTML Visibility API,我们可以检测访客是否正在浏览我们的界面. 在这个教程中我们会介绍如何使用HTML5 Visibility API,同时我们也为你准备了一个简单的demo来查看页…

今天的现代浏览器有时在系统资源受限的情境下会暂停页面或完全放弃执行它.将来,浏览器会主动执行此操作,因此它们会消耗更少的电量和内存.在Chrome 68中提供的Page Lifecycle API提供了生命周期钩子,因此网页可以安全地处理这些浏览器干预,而不会影响用户体验.具体请查看API了解你的应用程序是否需要实现这些特性. 背景 应用程序的生命周期是现代操作系统管理资源的关键.在Android, iOS, 和最近的Windows版本中,操作系统可以随时开始或结束应用程序.这使得这些平台可以简…

最近活动中的小游戏,有涉及页面隐藏或app后台运行时候,暂停游戏的功能,使用了h5的Visibility API,在此总结如下: 两个属性 document.hidden (Read only) 如果页面处于被认为是对用户隐藏状态时返回true,否则返回false. document.visibilityState (Read only) 是一个用来展示文档可见性状态的字符串.可能的值: visible : 页面内容至少是部分可见. 在实际中,这意味着页面是非最小化窗口的前景选项卡.hidden…

Technorati 标签: Page Scroll Menu,页面锚点菜单,Menu,Too Long,页面太长   当页面太长时,会导致浏览不便,这时就需要一个页面锚点菜单(Page Scroll Menu),方便用户快速了解页面的概要及目录并快速定位到相应的目录. 实现方式: 1. 将页面按照内容分成不同的Section, 页面加载时读取各个Section并生成Menu,点击对应的Menu时计算对应Section的位置并设置其位置. 示例 1:http://www.outyear.co.u…

InnoDB Page Structure(InnoDB页面结构详解) 此转载自登博的博客,给大家分享.…

C# PDF Page操作——设置页面切换按钮   概述 在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法.示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页.下页.上页或者最后一页,另一种是设置按钮跳转到指定页面.两种方法适应不同的程序设计需要,可自行选择合适的添加方法. 说明 这里的代码示例需要使用类库Spire.PDF for .NET,版本4.0 .在使用该类库时,在项目程序中引用Spire.Pdf.dll即可(dll文件在安装路径下的Bin文件中获取). 如:…

组件三大API之二: event 在上一节中讲到prop单向下行数据绑定的特征,父组件向子组件传值通过prop实现,那如果有子组件需要向父组件传值或其它通信请求,可以通过vue的事件监听系统(触发事件,执行监听回调函数,并且可以在回调函数中接受传参). Vue内置了一套完整的事件触发器逻辑: v-on / @: 原来HTML元素中监听原生事件,或子组件自定义事件 .native: 触发组件根元素的原生事件 $on:监听组件自身触发的事件 $emit: 触发事件 $off: 卸载组件自身的事件监听…

在项目需求中,有需要用到输入框在进入这个页面的时候就自动定位获取这个输入框的焦点. 查了许多资料,也问了ionic3的大神,现将知识点记录如下: 1.能不能直接设置ion-input的属性值来达到自动获取焦点的目的 使用autofocus="true"属性值 效果: ⑴在网页端浏览,可以自动获取焦点了,这个方式应该对只需要web端的同学有效.但使用ionic3框架的目的应该是为了制作移动端吧. ⑵在移动端可以获取焦点,但随后就失去焦点了.显然,移动端的获取焦点这个方式是不可行的. 2.…

一直以来,判断页面是不是当前可见标签,浏览器有没有缩小都是比较麻烦的.   通过页面可见性API可以获得相关信息document.hidden  判断页面当前是不是可见的document.visibilitystate 过得页面状态,背后的标签或者前面的标签,预览图状态(类似window的小预览图)等四种状态visibilitychange事件,当页面状态改变时触发   if (document.hidden || document.msHidden || document.webKitHidd…

[摘要:[本文属本创,若有转载,请说明出处http://blog.csdn.net/yl02520/article/] visibilitychange事情是扫瞄器新增加的一个事情,当扫瞄器的某个标签页切换到背景,或从背景切换到前台时便会触收该] visibilitychange事件是浏览器新添加的一个事件,当浏览器的某个标签页切换到后台,或从后台切换到前台时就会触发该消息,现在主流的浏览器都支持该消息了,例如Chrome, Firefox, IE10等.虽然这只是一个简单的功能,但是能够广大的…

AngularJS这个JS框架是个神马东东我也不太清楚,我也是初学者~~ AngularJS适用于single page App,单页面程序都是局部刷新的,这一点和Ajax有第一的区别,因为使用Ajax的一个致命点是 会使浏览器的后退 按钮失效. 在AngularJs中有几个核心的知识点:scope(块),controller(控制器),service(服务),directive(指令).Module(模块). 请看下面我画的草图.   接下来我将结合一个简单的例子给大家讲讲如何使用Angula…

组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后面再修改 API 就很困难了,使用者都是希望不断新增功能,修复 bug,而不是经常变更接口.如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一个组件的所有功能. 属性 prop prop 定义了这个组件有哪些可配置的属性,组件的核心功能也都是它来确定的.写通用组件时,props…

public class BasePage:Page protected override void OnPreLoad(EventArgs e){     base.OnPreLoad(e);     .................. } 这样 就可以在基类页面 统一做一些判断了…

我们可以先看下简单效果,打开2个页面可以看到推送效果 服务端我们只需要下面一个方法 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class pagepush : System.Web.UI.Page { protected void P…

Page Object模式是Selenium中的一种测试设计模式,主要是将每一个页面设计为一个Class,其中包含页面中需要测试的元素(按钮,输入框,标题 等),这样在Selenium测试页面中可以通过调用页面类来获取页面元素,这样巧妙的避免了当页面元素id或者位置变化时,需要改测试页面代码的情况. 当页面元素id变化时,只需要更改测试页Class中页面的属性即可. Page Object模式是一种自动化测试设计模式,将页面定位和业务操作分开,分离测试对象(元素对象)和测试脚本(用例脚本),提高…

概述 在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法.示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页.下页.上页或者最后一页,另一种是设置按钮跳转到指定页面.两种方法适应不同的程序设计需要,可自行选择合适的添加方法. 说明 这里的代码示例需要使用类库Spire.PDF for .NET,版本4.0 .在使用该类库时,在项目程序中引用Spire.Pdf.dll即可(dll文件在安装路径下的Bin文件中获取). 如: 代码操作示例(供参考) 1.跳转至特定页(首页.下…

Javascript刷新页面的几种方法:1    history.go(0) 2    location.reload() 3    location=location 4    location.assign(location) 5    document.execCommand('Refresh') 6    window.navigate(location) 7    location.replace(location) 8    document.URL=location.href 自动…