Webview продолжает терять фокус

У меня есть приложение, которое в основном просто оболочка для внутреннего сайта компании. Идея состоит в том, чтобы легко загрузить веб-сайт в свое собственное окно на моем Chromebook, чтобы он не выгружался при нехватке оперативной памяти.

У меня очень простое приложение с одним WebView, которое использует все окно приложения. Проблема в том, что всякий раз, когда я отворачиваюсь от окна и возвращаюсь, веб-просмотр теряет фокус. Это особенно раздражает, потому что это приложение для чата, и я хотел бы начать разговор сразу после нажатия клавиши alt-tab обратно в окно.

Я рассматривал фокусировку веб-просмотра каждый раз, когда окно получает фокус, но разрыв между 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

Заставить веб-представление поглотить все окно было немного сложно; Мне пришлось использовать некоторые избыточные свойства 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%;
}
Источник

1 ответ

Решение

Вы можете достичь этого просто с помощью API Page Visibility. Вы можете использовать его для добавления прослушивателя событий и проверки 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.

Источник
Другие вопросы по тегам