概述

本文讲述了应用程序显示的两种状态：可见状态和隐藏状态。

应用程序可见性的HTML页面

index.html页面有一个按钮，它可以启动一个应用程序（本地报警应用），并会使当前的应​​用程序进入隐藏状态。

<button onclick="launch_sample();">Launch App</button>

应用程序可见性的JavaScript文件

设置隐藏属性的名称和可见性改变的事件。 “document.hidden”以同样的方式被实现为Chrome中的“document.webkitHidden”。 “document.hidden”是一个布尔值，表示页面是否可见。 这可能意味着该应用程序正在后台运行。 一个web应用程序从隐藏到可见或者从可见到隐藏时，会触发“visibilitychange”事件。

var hidden,visibilityChange;
if (typeof document.hidden !== "undefined") {
	hidden = "hidden";
	visibilityChange = "visibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
	hidden = "webkitHidden";
	visibilityChange = "webkitvisibilitychange";
}

处理页面可见性变化

"document.visibilityState"在可见性状态之间转换后，会发送一个简单的事件给文档对象。 直接为文档对象注册一个如下所述的事件监听器

var timer=0;
function handleVisibilityChange(){
if (document[hidden]){
	console.log("Page is now hidden.");
	timer = new Date().getTime();
    } else {
	console.log("Page is now visible.");
	alert('You were away for ' + (new Date().getTime()-timer)/1000+ ' seconds.');
    }
}
document.addEventListener(visibilityChange, handleVisibilityChange, false);

上面的代码给出了一个警告，用来显示应用程序在隐藏状态的时间。

设置定时器

下面的代码设置一个定时器，当Web应用程序加载时定时器启动；当应用程序进入隐藏状态时，定时器暂停；当应用程序回到可见状态时，定时器恢复。 同样在处理视频，音频和动画的应用程序中也可以设置这样的定时器。

var visible_time=0;
var timer1 = 0;
var PERIOD_VISIBLE = 1000;
var PERIOD_NOT_VISIBLE = 2000;
timer1 = setInterval(checkVisibility, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
document.addEventListener("webkitvisibilitychange", visibilityChanged, false);
function visibilityChanged() {
   clearInterval(timer1);
   timer1 = setInterval(checkVisibility, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
}
function checkVisibility() {
   $('#timer').empty();
   visible_time++;
   $('#timer').append("<center>Page is visible for : "+visible_time+" seconds</center>");
}

在应用程序启动时改变可见性状态

下面的代码中，我们启动一个叫Native Alarm的应用程序，Native Alarm这个应用程序会使得当前的应用程序可见性状态为隐藏。 除了这一点，屏幕关闭时，应用程序也进到隐藏状态。

function onsuccess() {
    console.log("The application has launched successfully");
}
function launch_sample(){
    tizen.application.launch("org.tizen.clock", onsuccess);
}