我有一个应用程序，它基本上只是公司内部网站的包装器。这个想法是在我的 Chromebook 上的自己的窗口中轻松加载网站，这样它就不会在 RAM 变低时卸载。
我有一个非常简单的应用程序，其中包含一个占用整个应用程序窗口的 WebView。问题是，每当我离开窗口再回来时，webview 就会失去焦点。这特别烦人，因为它是一个聊天应用程序，我想在按 alt-tab 键回到窗口后立即开始聊天。
每次窗口获得焦点时，我都研究过聚焦 webview，但是 Window(来自 chrome.windows)和 AppWindow(来自 chrome.app.window)之间的断开使得这很重要。我需要的事件只存在于 Window 对象中，但我只能确定地获取当前的 AppWindow。理论上我可以在应用程序首次启动时获得当前事件的窗口，但这似乎很老套且不可靠。
index.html
<!DOCTYPE html>
<html>
<head>
<title>Chat App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<webview src="https://example.com/" id="chat"></webview>
</body>
</html>
背景.js
chrome.app.runtime.onLaunched.addListener(function(launchData) {
chrome.app.window.create(
'index.html',
{
id: 'chat'
}
);
});
样式.css
让 webview 占用整个窗口有点棘手；我必须使用一些冗余的 CSS 属性才能使其正常工作。
html, body {
margin: 0;
padding: 0;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
#chat {
border: 0 none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
最佳答案
您可以简单地使用 Page Visibility API 来实现这一点.您可以使用它来添加事件监听器并检查 document.hidden 状态以将焦点返回到聊天框。您还可以执行其他操作，例如在标签不可见时收到聊天消息时播放音频提醒。
在此示例中，我还向第一个聊天框添加了一个事件监听器，因此如果焦点丢失，它会尝试再次获取它。这是一种相当笨拙的方法，但您可以调整逻辑以满足要求。
function handleVisibilityChange() {
console.log(document.hidden);
if (!document.hidden) {
chatFocus();
}
}
function chatFocus() {
document.getElementById("ChatBox1").focus();
}
document.addEventListener("visibilitychange", handleVisibilityChange, false);
document.getElementById("ChatBox1").addEventListener("blur", chatFocus, true);<input type="text" id="ChatBox1" placeholder="ChatBox1">
<input type="text" id="ChatBox2" placeholder="ChatBox2">在 Chrome 上对此进行测试，您会发现如果切换到另一个选项卡或最小化窗口，则会触发 visibilitychange 事件。但是，如果您只是切换到另一个窗口，它不会认为该页面已隐藏。通常，您还可以使用 window.onblur 来监听页面何时失去焦点。
附言。关于你的“棘手”冗余 CSS:指定 left: 0 和 width: 100% 应该是你所需要的(right: 0 不应该是必要的)，但除此之外，文本字段往往具有边框和填充等。因此，为了确保该字段最终不会比其容器宽，您需要设置 box-sizing: border- box 以便在确定其大小时包含填充和边框。这是解决 CSS 中许多问题的技巧。
关于javascript - Webview 不断失去焦点，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31148052/