Fullscreen

JavaScript Fullscreen API is supported by most of the popular browsers (List of Browsers Support Fullscreen API). Source: screenfull.js。

Methods

Called using $.AMUI.fullscreen.

`.request()`

Make an element displayed on full screen mode. Use an DOM element as parameter. Default parameter is html.

If full screen element is a <iframe> element, add allowfullscreen attribute to it first (+ webkitallowfullscreen and moz llowfullscreen).

<iframe id="frame1" allowfullscreen mozallowfullscreen webkitallowfullscreen src="iframeTest.html"></iframe>

Be aware of that full screen API can only be initialized through user event, such as click, touch, key etc.

`.exit()`

Exit from the full screen mode.

`.toggle()`

Swich between the normal mode and full screen mode.

Events

Full screen status

var fullscreen = $.AMUI.fullscreen;
if (fullscreen.enabled) {
  document.addEventListener(fullscreen.raw.fullscreenchange, function() {
    console.log('Am I fullscreen? ' + (fullscreen.isFullscreen ? 'Yes' : 'No'));
  });
}

Full screen error

var fullscreen = $.AMUI.fullscreen;
if (fullscreen.enabled) {
  document.addEventListener(fullscreen.raw.fullscreenerror, function(e) {
    console.error('Failed to enable fullscreen', e);
  });
}

Options

`.isFullscreen`

Boolean. Return true if is in full screen mode.

`.element`

Return the full screen element. Return null if there is no full screen element.

`.enabled`

Boolean. If full screen mode is enabled. If full screen element is a <iframe> element, add allowfullscreen attribute to it first (+ webkitallowfullscreen and moz llowfullscreen).

`.raw`

Return an object with original method name. The key object includes: requestFullscreen, exitFullscreen, fullscreenElement, fullscreenEnabled, fullscreenchange and fullscreenerror.

$(document).on($.AMUI.fullscreen.raw.fullscreenchange, function () {
    console.log('Fullscreen change');
});

Usage

Whole Page

$('#demo-full-page').on('click', function () {
    if ($.AMUI.fullscreen.enabled) {
    $.AMUI.fullscreen.request();
    } else {
        // Ignore or do something else
    }
});

Single Element

Click on the image to view it in full screen mode.

<div>
  <img id="demo-full-img" src="http://s.cn.bing.net/az/hprichbg/rb/WorkingFarmer_ZH-CN9182210796_1366x768.jpg"
       width="340"
       height="142"
       alt=""/>
  <br/>
  Click on the image to view it in full screen mode.
  <br/>
  <span id="doc-fs-img"></span>
</div>

var fullscreen = $.AMUI.fullscreen;

$('#demo-full-img').on('click', function () {
  if (fullscreen.enabled) {
    fullscreen.request(this);
  }
}).on(fullscreen.raw.fullscreenchange, function () {
  // 监听图片全屏状态
  var text = 'Image status: ' + (fullscreen.isFullscreen ? 'Fullscreen' : 'Non-fullscreen');
  $('#doc-fs-img').html(text);
});

Listen to the change of fullscreen status

Open the console and try the example above.

if (fullscreen.enabled) {
    $(document).on($.AMUI.fullscreen.raw.fullscreenchange, function () {
        console.log('Am I fullscreen? ' + ($.AMUI.fullscreen.isFullscreen ? 'Yes' : 'No'));
    });
}

Amaze UI 2.4

JavaScript

TOC