Как всегда с 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');
}
};