如何构建一个能够监控页面何时获得焦点的网页，尤其是当 Safari 在后台并且用户将 Safari 切换回前台时。
在 iPhone 上切换到 Safari 时，以下代码不会触发该事件
<html>
<head>
<script type="text/javascript">
window.onfocus = function() { alert("onfocus"); };
</script>
</head>
<body>
Main text
</body>
</html>
根据http://www.quirksmode.org/dom/events/index.html：当窗口获得焦点时，Safari iPhone 不会触发事件。
所以我的问题仍然是：如何通过在 Safari for iPhone 中的网页上使用 Javascript 来检测窗口接收焦点？
我相信计时器 (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 可能会重新加载页面，因为它的内存不足。
根据您需要支持的内容，您需要多种不同的技术来检测页面何时可见。由于浏览器供应商、浏览器版本、操作系统、在 WebView/UIWebView/WKWebView 中运行等而发生变化。
您可以使用此页面查看正在发生的事件。我发现要检测页面何时在所有组合上“唤醒”，我需要注册以下所有事件：
我曾经也使用过 webkitRequestAnimationFrame，但我删除了它，因为它可能会导致卡顿（AFAIK 渲染引擎会为它阻塞调用主线程）。
尝试的事情：
您可以查看正在发生的事件：
iOS：请注意，如果使用计时器来检测 iOS UIWebView 是否已进入睡眠状态，则需要使用new Date.getNow()而不是来测量差异performance.now()。那是因为performance.now()当页面进入睡眠状态时停止计算时间，而且 iOS 实现 performance.now() 的速度也很慢......（另外：您可以通过检测对于差异new Date.getNow()和performance.now()，认准！=上测试页）。
如果您使用的是 UIWebView，那么有两种技术有效（如果您支持 iOS7 应用程序，则必须使用 UIWebView）。WKWebView 具有可见性更改事件，因此不需要解决方法。
==技术1。
当应用程序中发生 applicationWillEnterForeground 事件时，调用 UIWebView stringByEvaluatingJavaScriptFromString 来调用您的 JavaScript pageAwakened()。
优点：干净、准确。
缺点：需要 Objective-C 代码。被调用的函数需要可从全局范围访问。
==技术2。
使用 webkitRequestAnimationFrame 并检测时间延迟。
优点：仅限 JavaScript。适用于 iOS7 上的移动 Safari。
缺点：卡顿的丑陋风险和使用 webkitRequestAnimationFrame 是一个严重的黑客。
// 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();
});
在网页浏览权限API可能会提供一个解决这个问题。我猜这个 API 还没有在 Mobile Safari 中实现，至少我还没有找到任何关于 iOS 实现的文档。然而，Webkit Trunk 已经提交了一个实现，因此它有可能被未来版本的 Mobile Safari 支持。
我写了一个小测试页面来查看哪些事件被发送到 iOS 上的窗口。
该页面具有“Apple Web 应用程序功能”，因此您可以将其保存到主屏幕并在独立模式下进行测试。
这是页面：窗口事件的测试
代码：
// 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>窗口上的 focus 和 blur 事件可以很好地检测浏览器是要进入后台还是从后台返回。这在 iOS8 Safari 上对我有用：
window.addEventListener("focus", function(evt){
console.log('show');
}, false);
window.addEventListener("blur", function(evt){
console.log('hide');
}, false);