javascriptwidgetadobe-captivatehtml5-fullscreen

Edit iframe attributes from a widget in Adobe Captivate


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.

Solution

  • 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).