фокусировка клавиатуры холста через iframe (противостоит переключателю табуляции)

Question

У меня есть холст в iframe.html, который загружается в index.html. В пределах iframe.html игра получает ввод с клавиатуры через window.addEventListener('keypress', press, false);.

Это прекрасно работает. Однако, если в любое время пользователь нажимает tab, iframe теряет фокус и не может вернуть его (даже если вы нажмете обратно на iframe / canvas). Мышь продолжает работать, но клавиатура игнорируется.

Одно решение, которое я нашел, это поместить его в index.html:

setInterval(function(){document.getElementById("content").contentWindow.focus();},100);

("content" - это id в iframe).

Проблема в том, что: 1. он постоянно работает с этим кодом BS, и 2. я могу, а может и не иметь контроля над тем, что будет в index.html в будущем (возможно, я буду размещать его на стороннем сервере) сайты).

Итак, я предполагаю, что есть решение, которое не выполняет постоянно код перефокусировки и не требует какого-либо кода на веб-странице, содержащей iframe.

Примечание. Я полностью согласен, если «вкладка» теряет фокус, но для пользователя должен быть способ вернуть фокус фрейма.

Answer 1

Можете ли вы добавить в документ iframe прослушиватель событий на document, который вызывает event.preventDefault(); на keydown? Кроме того, таким же образом, не могли бы вы добавить click прослушиватель событий, который вызывает focus() на то, что вы хотите сосредоточиться? Если это не естественно фокусируемый элемент, добавьте tabindex="1".

Может быть, есть какая-то особенность iframes, которую я не рассматриваю, но похоже, что она должна работать.

document.querySelector('div').addEventListener('click', ()=>{
  document.querySelector('div').focus();
});

document.querySelector('div').addEventListener('keydown', (e)=>{
  if (e.key === 'Tab') {
    e.preventDefault();
  }
});

div {
  background-color: red;
}

div:focus {
  background-color: blue;
}

<div tabindex="0">I'm bad for accessibility!</tabindex>