Amaze UI

Fullscreen


JavaScript Fullscreen API 跨浏览器兼容封装(Fullscreen API 兼容性列表),针对浏览器前缀优化,减少开发时间。源自 screenfull.js

使用示例

基础用法

Copy
<button class="am-btn am-btn-primary" id="doc-fs-request">全屏窗口</button>
<button class="am-btn am-btn-primary" id="doc-fs-exit">退出全屏</button>
<button class="am-btn am-btn-primary" id="doc-fs-toggle">全屏交替</button>

在元素添加 id 实现相应效果。

  • doc-fs-request 全屏窗口
  • doc-fs-exit 退出全屏
  • doc-fs-toggle 全屏交替

全屏显示元素

点击图片全屏显示


Copy
<style>
  #demo-full-img:-webkit-full-screen {
    width: 100%;
    height: auto;
    display: block;
  }
</style>
<div>
  <img id="demo-full-img" src="http://s.amazeui.org/media/i/demos/2017-1-19-new.png"
       width="340"
       height="180"
       alt=""/>
  <br/>
  <span id="doc-fs-img"></span>
</div>

<img> 添加 demo-full-imgid 样式即可。

监听全屏状态改变

打开控制台,点击上面的图片全屏演示看看

Copy
<p>打开控制台,点击上面的图片全屏演示看看</p>
<script>
$(function() {
  var fullscreen = $.AMUI.fullscreen;

  // demo1
  $('#doc-fs-request').on('click', function () {
    fullscreen.enabled && fullscreen.request();
  });

  $('#doc-fs-exit').on('click', function () {
    fullscreen.enabled && fullscreen.exit();
  });

  $('#doc-fs-toggle').on('click', function () {
    fullscreen.enabled && fullscreen.toggle();
  });

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

  // demo3
  if (fullscreen.enabled) {
    $(document).on(fullscreen.raw.fullscreenchange, function () {
      console.log('是否全屏状态? ' + (fullscreen.isFullscreen ? 'Yes' : 'No'));
    });
  }
});
</script>

方法

以下方法通过 $.AMUI.fullscreen 接口调用。

.request()

使元素全屏。接受一个 DOM 元素作为参数,默认为 html

<iframe> 中需要添加 allowfullscreen 属性 (+ webkitallowfullscreen and moz allowfullscreen)。

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

注意全屏 API 仅能通过用户事件(如 click、touch、key) 初始化。

.exit()

退出全屏模式。

.toggle()

全屏模式切换。

事件监听

全屏状态变化

var fullscreen = $.AMUI.fullscreen;
if (fullscreen.enabled) {
  document.addEventListener(fullscreen.raw.fullscreenchange, function() {
    console.log('是否全屏状态? ' + (fullscreen.isFullscreen ? 'Yes' : 'No'));
  });
}

监听全屏错误

var fullscreen = $.AMUI.fullscreen;
if (fullscreen.enabled) {
  document.addEventListener(fullscreen.raw.fullscreenerror, function(e) {
    console.error('未能实现全屏功能', e);
  });
}

属性

.isFullscreen

布尔值,是否处于全屏模式。

.element

返回当前处于全屏模式的元素,没有则返回 null

.enabled

是否允许全屏模式。<iframe> 中的页面需要添加 allowfullscreen 属性 (+ webkitallowfullscreen and moz allowfullscreen)。

.raw

返回包含原始方法名称的对象,对象 key 包括: requestFullscreen, exitFullscreen, fullscreenElement, fullscreenEnabled, fullscreenchange,fullscreenerror

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

参考资源

License

MIT © Sindre Sorhus