12

我有一个应用程序，它基本上只是内部公司网站的包装器。这个想法是在我的 Chromebook 上自己的窗口中轻松加载网站，这样当 RAM 变低时它就不会卸载。

我有一个非常简单的应用程序，它有一个使用整个应用程序窗口的 WebView。问题是，每当我从窗口切换回来时，webview 就会失去焦点。这特别烦人，因为它是一个聊天应用程序，我想在 alt-tab 键回到窗口后立即开始交谈。

每次窗口获得焦点时，我都会关注 webview，但是 Window（来自 chrome.windows）和 AppWindow（来自 chrome.app.window）之间的断开连接使得这不简单。我需要的事件只存在于 Window 对象中，但我只能明确获得当前的 AppWindow。理论上，当应用程序首次启动时，我可以得到当前活动的窗口，但这似乎很老套且不可靠。

索引.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%;
}
4

1 回答 1

5

您可以通过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: 0andwidth: 100%应该是你所需要的（right: 0不应该是必要的），但除此之外，文本字段往往有边框和填充等，所以为了确保字段不会结束比它的容器更宽，您需要设置box-sizing: border-box以便在确定其大小时包括填充和边框。这是解决 CSS 中许多问题的技巧。

于 2015-07-09T21:49:06.997 回答