我该如何构建一个网页，能够监视该页面何时获得焦点，尤其是当Safari处于后台且用户将Safari切换回前台时。
下面的代码在iPhone上切换到Safari时不会触发事件。
<html>
<head>
<script type="text/javascript">
window.onfocus = function() { alert("onfocus"); };
</script>
</head>
<body>
Main text
</body>
</html>
根据需要支持的内容，需要使用不同的技术来检测页面何时变为可见。由于浏览器供应商、浏览器版本、运行在WebView/UIWebView/WKWebView中等原因，可能会出现差异。
您可以使用此页面查看正在发生的事件。我发现，在所有组合上检测页面“唤醒”的时间需要注册以下所有事件：
我曾经使用过webkitRequestAnimationFrame，但我将其删除了，因为它可能会导致卡顿（据我所知，渲染引擎对主线程进行了阻塞调用）。
试一试：
您可以看到正在发生的事件：
iOS：如果使用计时器检测iOS UIWebView是否已进入睡眠状态，请注意，您需要使用new Date.getNow()来测量差异，而不是performance.now()。因为performance.now()停止计算时间时，页面也被放置到休眠状态中，此外，iOS实现performance.now()时速度较慢……（另外：您可以通过检测new Date.getNow()和performance.now()之间的差异来测量页面的休眠时间。在测试页面上查找！）。
如果使用UIWebView，则有两种有效技术（如果要支持iOS7应用程序，必须使用UIWebView）。WKWebView具有visibilitychange事件，因此无需使用解决方法。
==技巧1。
当应用程序在前台运行时，调用UIWebView的stringByEvaluatingJavaScriptFromString方法来调用你的JavaScript页面被唤醒的函数pageAwakened()。// iOS specific workaround to detect if Mobile App comes back to focus. UIWebView and old iOS don't fire any of: window.onvisibilitychange, window.onfocus, window.onpageshow
function iosWakeDetect() {
function requestAnimationFrameCallback() {
webkitRequestAnimationFrame(function() {
// Can't use timestamp from webkitRequestAnimationFrame callback, because timestamp is not incremented while app is in background. Instead use UTC time. Also can't use performance.now() for same reason.
var thisTime = (new Date).getTime();
if (lastTime && (thisTime - lastTime) > 60000) { // one minute
// Very important not to hold up browser within webkitRequestAnimationFrame() or reference any DOM - zero timeout so shoved into event queue
setTimeout(pageAwakened, 0);
}
lastTime = thisTime;
requestAnimationFrameCallback();
});
}
var lastTime;
if (/^iPhone|^iPad|^iPod/.test(navigator.platform) && !window.indexedDB && window.webkitRequestAnimationFrame) { // indexedDB sniff: it is missing in UIWebView
requestAnimationFrameCallback();
}
}
function pageAwakened() {
// add code here to remove duplicate events. Check !document.hidden if supported
};
window.addEventListener('focus', pageAwakened);
window.addEventListener('pageshow', pageAwakened);
window.addEventListener('visibilitychange', function() {
!document.hidden && pageAwakened();
});
我相信当应用程序进入后台时，计时器（setInterval()）会被暂停。你可以这样做：
var lastFired = new Date().getTime();
setInterval(function() {
now = new Date().getTime();
if(now - lastFired > 5000) {//if it's been more than 5 seconds
alert("onfocus");
}
lastFired = now;
}, 500);
你可能需要调整这些时间间隔以适应你的需求。
但是，最有可能的情况是，如果需要刷新（几天），Safari可能会重新加载页面，因为内存已经不足。
我写了一个小测试页面来查看 iOS 中发送到窗口的事件。
该页面具有“Apple Web App 可能性”，因此您可以将其保存到主屏幕并在独立模式下进行测试。
这是页面：Window 事件测试
代码：
// determine if this is a touch-capable device
const isTouchDevice = ('ontouchstart' in window) ||
(navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
console.log(`isTouchDevice: ${isTouchDevice ? 'TRUE' : 'FALSE'} `);
const button = document.getElementById('btnClear');
const divEvents = document.getElementById('divEvents');
const olEvents = document.getElementById('olEvents');
const divBottom = document.getElementById('divBottom');
// handle "clear history" button click
button.addEventListener('click', function() {
if (isTouchDevice) {
// simulate click on button using `focus` and `blur`
button.focus();
setTimeout(() => button.blur(), 500);
}
olEvents.innerHTML = '';
});
const eventNames = [
'load',
'focus',
'blur',
'change',
'close',
'error',
'haschange',
'message',
'offline',
'online',
'pagehide',
'pageshow',
'popstate',
'resize',
'submit',
'unload',
'beforeunload'
];
eventNames.forEach(function(eventName) {
window.addEventListener(eventName, function(evt) {
const now = new Date();
const timeStr = now.getHours().toString().padStart(2, '0') + ':' +
now.getMinutes().toString().padStart(2, '0') + ':' +
now.getSeconds().toString().padStart(2, '0') + '.' +
now.getMilliseconds();
let li = document.createElement('li');
li.innerHTML = timeStr + ' - ' + `<code>${evt.type}</code>`;
olEvents.appendChild(li);
// scroll to bottom
// window.scrollTo(0, divBottom.offsetTop);
const bottomOffset = divBottom.offsetTop;
divEvents.scrollTop = bottomOffset - 10;
});
});#divEvents {
border: 1px solid rgba(0, 0, 0, 0.5);
height: 400px;
max-width: 60rem;
padding: 1rem 0;
overflow-y: auto;
}
#olEvents {
font-size: 87.5%;
}
#divBottom {
height: 0px;
}
code {
font-size: 100%;
}
/* handle the sticky hover problem on touch devices */
@media (hover:none) {
/* set button hover style to match non-hover */
.btn-outline-primary:hover {
color: #007bff;
background-color: transparent;
background-image: none;
border-color: #007bff;
}
/* set button focus style to match hover */
.btn-outline-primary:focus {
color: #fff;
background-color: #007bff;
border-color: #007bff;
}
}<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=1, minimum-scale=1, shrink-to-fit=no, user-scalable=no">
<!-- apple web app meta tags -->
<meta name="apple-mobile-web-app-title" content="WinEvents">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>Test of Window Events</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootsdark@latest/dist/bootsdark.min.css">
</head>
<body class="d-flex flex-column h-100">
<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="https://terrymorse.com">Terry Morse
Software</a>
</nav>
</header>
<main role="main" class="flex-shrink-0 m-4">
<h1>Test of Window Events</h1>
<p>Displays all of the events (except for
<code>scroll</code>) sent to <code>document.window</code>.</p>
<p>
<button id="btnClear" class="btn btn-sm btn-outline-primary"
>Clear History</button>
</p>
<h4>Events Caught:</h4>
<div id="divEvents">
<ol id="olEvents" class="text-monospace"></ol>
<div id="divBottom"></div>
</div>
</main>
</body>页面可见性API 可能会提供解决此问题的方案。我猜测这个API尚未在移动版Safari中实现，至少我没有找到任何有关iOS版本的文档。然而，在Webkit分支中已经提交了一个实现，因此未来的Mobile Safari版本可能会支持它。
window.addEventListener("focus", function(evt){
console.log('show');
}, false);
window.addEventListener("blur", function(evt){
console.log('hide');
}, false);
由于问题出现在移动版 Safari 上，而且它支持 popstate 事件，因此您可以使用此事件来检测用户何时返回。
pageshow和pagehide事件。<script type="text/javascript">
window.addEventListener("pageshow", function(evt){
alert('show');
}, false);
window.addEventListener("pagehide", function(evt){
alert('hide');
}, false);
</script>