requestFullscreen works no more in message event handler - google-chrome

Question

User clicks a button and in click event handler we postMessage to iframe. Iframe handles it in message event handler and calls element.requestFullscreen(). In older browsers it worked (eg. in Chrome 65) but in current (72) it errors with Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture..
Is there a way to transfer "gesture initiated" flag in postMessage call?
Note that iframe has allow="fullscreen" attribute.

Answer 1

As always with iframes, it depends on here it is hosted relative to the parent document.
If you are running a same-origin document in that frame, then you can simply call requestFullScreen directly on the element you wish form the main doc:
const frameDoc = frame.contentDocument;
frameDoc.getElementById('el-to-fs').requestFullscreen(); // assuming polyfill
jsfiddle Since StackSnippets® overly protected iframes won't allow access nor fullscreen.
But if you were, you wouldn't have had this issue in Chrome (you'd still have had in FF).
Because even though it is true that this method requires an user-gesture, postMessage being fast enough, you are able to use it with a same-origin frame in Chrome.
What happens in this browser is that a cross-origin document must have received an user-gesture before being able to call requestFullscreen.
Once the cross-origin frame has been marked as interacted-by-the-user, then you'll be able to call requestFullscreen even from main-doc's events: jsfiddle (still, only in Chrome).
But, for a cross-browser solution, you'd have to
load this content as same-origin (e.g using a proxy)
or to use a small hack where you set the <iframe> in fullscreen mode and let the inner document know you did so, so it can style its document accordingly: 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');
}
};