I am writing a widget for Adobe Captivate, which has to work in HTML5. This widget contains a button to toggle the full screen mode. Basically, the plugin looks like that:
function toggleFullscreen(elem) {
elem = elem || document.documentElement;
if (!document.fullscreenElement && !document.mozFullScreenElement &&
!document.webkitFullscreenElement && !document.msFullscreenElement) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
document.getElementById("fullscreen").addEventListener("click", toggleFullscreen);
<button id="fullscren">Toggle full screen</button>
But the widget is inserted in an iframe
, and this iframe
does not have the allowfullscreen
attribute, and therefore prevents the button to toggle the full screen mode.
I am looking for a way either to add the allowfullscreen
attribute to the iframe
by executing some Javascript from the inside of the iframe
, either to publish the project with the correct configuration to automatically add this attribute.
I tried to use the Javascript accessor parent.document
, but I get an error :
Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.
Using the parent
attribute in Javascript is enough. You can then add the allowfullscreen
attribute with this line :
parent.document.getElementsByTagName('iframe')[0].setAttribute('allowFullScreen', 'true');
However, this does not work when displaying the published project from a local source (Cross-origin protection). It works fine when displayed from a webserver (even localhost).