Zen*_*xer 11 javascript google-chrome google-chrome-app google-chrome-webview
我有一个应用程序,基本上只是内部公司网站的包装.我的想法是在我的Chromebook上轻松加载自己的窗口,这样当RAM变低时它就不会卸载.
我有一个非常简单的应用程序,只有一个WebView,它占用整个应用程序窗口.问题是,每当我从窗口切换回来时,webview就会失去焦点.这特别令人讨厌,因为它是一个聊天应用程序,我想立即开始通过alt-tabbing回到窗口.
每次窗口获得焦点时我都会关注webview,但是Window(来自chrome.windows)和AppWindow(来自chrome.app.window)之间的断开使得这一点非常重要.我需要的事件只存在于Window对象中,但我只能最终获得当前的AppWindow.理论上,当应用程序首次启动时,我可以获得当前活动的窗口,但这似乎是hackish和不可靠的.
<!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>
chrome.app.runtime.onLaunched.addListener(function(launchData) {
chrome.app.window.create(
'index.html',
{
id: 'chat'
}
);
});
使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 中许多问题的技巧。
| 归档时间： |
|
| 查看次数： |
1033 次 |
| 最近记录： |