Question

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

我有一个非常简单的应用程序，只有一个WebView，它占用了整个应用程序窗口。问题是，每当我从窗口切换回来时，webview就会失去焦点。这特别令人讨厌，因为它是一个聊天应用程序，我想立即通过alt-tabbing回到窗口开始说话。

每次窗口获得焦点时我都会关注webview，但是Window（来自chrome.windows）和AppWindow（来自chrome.app.window）之间的断开使得这一点非常重要。我需要的事件只存在于Window对象中，但我只能最终获得当前的AppWindow。理论上，当应用程序首次启动时，我可以获得当前活动的窗口，但这似乎是hackish和不可靠。

的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%;
}

Answer 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中许多问题的技巧。

Webview一直在失去焦点

的index.html

background.js

styles.css的

1 个答案: