阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.Fullscreen 中文API文档

      插件 jQuery.Fullscreen 中文API文档

      源码 & 下载

      用于在全屏模式下打开页面元素的jQuery插件。

      jQuery Fullscreen插件允许您在全屏模式下打开页面上的任何元素,而无需在所有现代浏览器(Firefox,IE,Chrome,Safari,Opera)中使用Flash。如果浏览器不支持此功能,则只需拉伸元素以适应屏幕而不切换到全屏。

      Chrome 15 +,Safari 5.1 +,Firefox 10 +,Opera 12.1+和IE 11本身支持全屏API。它也存在于Firefox 9.0中,但默认情况下禁用。你可以通过设置启用它fullscreen-api.enabled来true在about:config。

      用法

      请求/退出全屏

      <div id="some_selector">
          Block to be displayed in fullscreen.
      </div>
      
      <script>
          // open element in fullscreen
          $('#some_selector').fullscreen(options);
          // close fullscreen
          $.fullscreen.exit();
      </script>
      

      目前支持以下选项:

      • overflow {‘hidden’}:‘overflow’css-property,在全屏打开时设置为元素;
      • toggleClass {null}:当元素改变其“全屏”状态时切换的类名;

      $ .fullscreen对象方法

      • $.fullscreen.open(element[, options]):相当于$(element).fullscreen(options);
      • $.fullscreen.exit():退出全屏模式;
      • $.fullscreen.isNativelySupported() {true|false}:true如果浏览器本机支持Fullscreen API,则返回;
      • $.fullscreen.isFullScreen() {true|false}:true如果在全屏中打开了一个元素,则返回。

      活动

      fscreenchange

      fscreenchangewindow.document当页面上的某个元素更改其“全屏”状态时,会发送事件。将三个参数传递给事件的处理程序:

      • jQuery.Event对象
      • 全屏状态(真或假)
      • Element

      fscreenopen / fscreenclose

      fscreenopen和fscreenclose事件时,它在全屏(或退出全屏模式)被打开发送给一个元素。

      fscreenerror

      fscreenerror 如果无法执行请求的全屏操作,则会在@ document @上触发事件。

      安全说明

      由于安全原因,来电一样$(…).fullscreen(),$.fullscreen.open()和$.fullscreen.close()只允许内部用户生成的事件(如点击,KEYDOWN,等…)。这意味着以下代码将不起作用:

      $(function() {
          $('body').fullscreen();
      });
      

      因为这里的全屏直接调用而没有来自用户的任何操作。

      浏览器支持

      • Firefox 10+
      • Chrome 15+
      • Safari 5.1+
      • Opera 12.1+
      • Internet Explorer 11
      • IE 8-10(也应该在IE7中工作,也许还有一些小问题)
      目录
      目录