Webview 不断失去焦点
Posted
技术标签:
【中文标题】Webview 不断失去焦点【英文标题】：Webview keeps losing focus 【发布时间】：2015-09-17 19:51:13 【问题描述】：我有一个应用程序，它基本上只是内部公司网站的包装器。这个想法是在我的 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>
background.js
chrome.app.runtime.onLaunched.addListener(function(launchData)
chrome.app.window.create(
'index.html',
id: 'chat'
);
);
styles.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%;
【问题讨论】：
页面是否只有一个文本输入框？如果是这样，您可以尝试在输入接收到blur 事件时设置焦点。
也许这对你有用。 ***.com/questions/1060008/…
【参考方案1】：
您只需使用Page Visibility API 即可实现此目的。您可以使用它来添加事件侦听器并检查document.hidden 状态以将焦点返回到聊天框。您还可以执行其他操作，例如在标签不可见时收到聊天消息时播放音频提醒。
在这个例子中，我还在第一个聊天框添加了一个事件监听器，所以如果焦点丢失，它会尝试再次获取它。这是一种相当严厉的方法，但您可以调整您的逻辑以满足需求。
JSFiddle
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 来监听页面何时失去焦点。
PS。关于你的“棘手”冗余 CSS：指定 left: 0 和 width: 100% 应该是你所需要的（right: 0 不应该是必需的），但除此之外，文本字段往往有边框和填充等。为了确保该字段最终不会比其容器宽，您需要设置 box-sizing: border-box 以便在确定其大小时包含填充和边框。这是一个解决 CSS 中许多问题的技巧。
【讨论】：
谢谢；我明天给它一个测试。这个 API 在 Chrome 中似乎有点挑剔，但希望它能在应用窗口中正常工作。 如果您设法找到使用上述事件不起作用的任何特定情况，请告诉我。以上是关于Webview 不断失去焦点的主要内容，如果未能解决你的问题，请参考以下文章
当 iOS 11 Webview 失去焦点时，HTML <select> 停止触发 onchange 或 onblur
NSManagedObjectContext 保存导致 NSTextField 失去焦点