requestFullscreen больше не работает в обработчике сообщений - PullRequest
1 голос
/ 14 марта 2019

Пользователь нажимает кнопку, и в click обработчике событий мы postMessage добавляем iframe. Iframe обрабатывает его в message обработчике событий и вызывает element.requestFullscreen(). В более старых браузерах это работало (например, в Chrome 65), но в текущем (72) это ошибки с Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture..

Есть ли способ передать флаг "жест инициирован" в вызове postMessage?

Обратите внимание, что iframe имеет атрибут allow="fullscreen".

1 Ответ

2 голосов
/ 15 марта 2019

Как всегда с iframes, это зависит от того, где он размещен относительно родительского документа.

Если вы работаете с документом того же происхождения в этом фрейме, то вы можете просто вызвать requestFullScreen непосредственно по элементу, который вы хотите сформировать из основного документа:

const frameDoc = frame.contentDocument;
frameDoc.getElementById('el-to-fs').requestFullscreen(); // assuming polyfill

jsfiddle Поскольку чрезмерно защищенные фреймы StackSnippets® не позволяют ни доступа, ни полноэкранного режима.


Но если бы вы были, у вас не было быэта проблема в Chrome (вы бы еще имели в FF).

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

В этом браузере происходит то, что документ перекрестного происхождения должен получить жест пользователя, прежде чем он сможет вызвать requestFullscreen.
После того, как кадр перекрестного источника получилбыл помечен как взаимодействующий с пользователем, тогда вы сможете вызывать requestFullscreen даже из событий основного документа: jsfiddle (все еще только в Chrome).

Но для кросс-браузерного решения вам придется

  • загрузить этот контент как того же источника (например, с использованием прокси)
  • или использовать небольшой хак, когда вы установите <iframe> в полноэкранном режиме и сообщите внутреннему документу, что вы это сделали, чтобы он мог соответствующим образом оформить свой документ: jsfiddle
    main.js

    onclick = e => {
      frame.contentWindow.postMessage("you're going fullscreen", '*');
      frame.requestFullscreen();
    };
    

    frame.js

    onmessage = e => {
      if(message.data === "you're going fullscreen") {
        // trigger our special fullscreen CSS
        document.documentElement.classList.add('fullscreen');
        // do some DOM cleaning if needed
      }
      else if(message.data === "you're exiting fullscreen") {
        document.documentElement.classList.remove('fullscreen');
      }
    };
    
...