Webview 不断失去焦点

Question

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

我有一个非常简单的应用程序，只有一个 WebView 占用了整个应用程序 window。问题是，每当我离开 window 并返回时，webview 就会失去焦点。这特别烦人，因为它是一个聊天应用程序，我想在 alt-tab 回到 window.

后立即开始交谈

我研究过每次 window 获得焦点时聚焦 webview，但是 Window（来自 chrome.windows）和 AppWindow（来自chrome.app.window) 使这变得不平凡。我需要的事件只对Window个对象存在，但我只能确定获取当前的AppWindow。理论上我可以在应用程序首次启动时获得当前活动的 Window，但这似乎很老套且不可靠。

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 消耗整个 window 有点棘手；我必须使用一些多余的 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 状态到 return 焦点到聊天框。您还可以执行其他操作，例如在标签不可见时收到聊天消息时播放音频提醒。

在此示例中，我还向第一个聊天框添加了一个事件侦听器，因此如果焦点丢失，它会尝试重新获取。这是一种相当粗暴的方法，但您可以调整您的逻辑以适应要求。

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 上对此进行测试，您会发现如果切换到另一个选项卡，或最小化 window，则会触发 visibilitychange 事件。但是，如果您只是切换到另一个 window，它不会认为该页面已隐藏。通常，您还可以使用 window.onblur 来监听页面何时失去焦点。

PS。关于你的 'tricky' 冗余 CSS：指定 left: 0 和 width: 100% 应该是你所需要的（right: 0 不是必需的），但除此之外，文本字段往往有边框和填充等，因此为了确保字段最终不会比其容器宽，您需要设置 box-sizing: border-box 以便在确定其大小时包含填充和边框。这是解决 CSS.

中许多问题的技巧

Webview 不断失去焦点

Webview keeps losing focus

javascript

google-chrome

google-chrome-app

google-chrome-webview

index.html

background.js

styles.css