Fullscreen from iframe (#1236)

* First attempt to make the fullscreen button work inside an iframe.

* Cleaner distinction between document element and document.

* Scoping corrections. Auto-detect correct iframe.

* Added comments to the relevant sections.

* IE issue fixed.

* Same source issue solved. fullscreenToggle now checks if it is permitted to inspect other iframes.
This commit is contained in:
Ján Jockusch 2019-05-13 15:06:32 +02:00 committed by Lauri Kasanen
parent d3ec2aa4d1
commit 1d4ada6815

View File

@ -1537,28 +1537,67 @@ const UI = {
* ------v------*/ * ------v------*/
toggleFullscreen() { toggleFullscreen() {
if (document.fullscreenElement || // alternative standard method // Determine the document using fullscreen. This may either be
document.mozFullScreenElement || // currently working methods // just the "document", but if using the viewer in an iframe, you need
document.webkitFullscreenElement || // to use the parent window's "document" instead.
document.msFullscreenElement) { let doc = document;
if (document.exitFullscreen) { if (window.self !== window.top) {
document.exitFullscreen(); doc = window.parent.document;
} else if (document.mozCancelFullScreen) { }
document.mozCancelFullScreen(); // Check the fullscreen status using the correct document as
} else if (document.webkitExitFullscreen) { // a reference. The same document is then used to exit fullscreen.
document.webkitExitFullscreen(); if (doc.fullscreenElement || // alternative standard method
} else if (document.msExitFullscreen) { doc.mozFullScreenElement || // currently working methods
document.msExitFullscreen(); doc.webkitFullscreenElement ||
doc.msFullscreenElement) {
if (doc.exitFullscreen) {
doc.exitFullscreen();
} else if (doc.mozCancelFullScreen) {
doc.mozCancelFullScreen();
} else if (doc.webkitExitFullscreen) {
doc.webkitExitFullscreen();
} else if (doc.msExitFullscreen) {
doc.msExitFullscreen();
} }
} else { } else {
if (document.documentElement.requestFullscreen) { // To activate fullscreen, we need to find the correct document
document.documentElement.requestFullscreen(); // element, which is usually "document.documentElement". But when
} else if (document.documentElement.mozRequestFullScreen) { // using the viewer in an iframe, this is actually the iframe
document.documentElement.mozRequestFullScreen(); // element itself in the parent document.
} else if (document.documentElement.webkitRequestFullscreen) { let doc_el = document.documentElement;
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); if (window.self !== window.top) {
} else if (document.body.msRequestFullscreen) { // Seek out the correct iframe from the parent document.
document.body.msRequestFullscreen(); let iframes = window.parent.document
.getElementsByTagName('iframe');
for (let i in iframes) {
let content_doc = null;
try {
content_doc = iframes[i].contentDocument;
} catch (err) {
// I may not be permitted to read the contentDocument
// of the iframe, but then it can't be me, so ignore.
}
if (content_doc === document) {
doc_el = iframes[i];
// To use .body.msRequestFullscreen in IE, we need to
// set the document element accordingly.
// Note that the <iframe> must have the attribute
// "allowfullscreen" set for IE to allow the feature.
doc = iframes[i].contentDocument;
break;
}
}
}
// Activate fullscreen. All except MS use the document element for
// this. The behaviour of body.msRequestFullscreen is untested.
if (doc_el.requestFullscreen) {
doc_el.requestFullscreen();
} else if (doc_el.mozRequestFullScreen) {
doc_el.mozRequestFullScreen();
} else if (doc_el.webkitRequestFullscreen) {
doc_el.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (doc.body.msRequestFullscreen) {
doc.body.msRequestFullscreen();
} }
} }
UI.updateFullscreenButton(); UI.updateFullscreenButton();