阿西河

所有教程

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

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      插件 jQuery.fullscreen plugin 中文API文档

      插件 jQuery.fullscreen plugin 中文API文档

      源码 & 下载

      这个jQuery插件提供了一个简单易用的机制来控制现代浏览器的新全屏模式。目前只有较新的基于Webkit的浏览器(如Chrome和Safari),Firefox和IE11 +提供了这种全新的全屏功能。

      用法

      进入全屏模式

      您可以将整个页面或单个HTML元素切换到全屏模式:

      $(document).fullScreen(true);
      $("#myVideo").fullScreen(true);
      

      这仅在代码由用户交互触发时有效(例如按钮上的onclick事件)。浏览器不允许在没有用户交互的情况下进入全屏模式。

      退出全屏模式

      全屏模式始终通过文档退出,但此插件也允许通过任何HTML元素。然后使用所选HTML元素的所有者文档:

      $(document).fullScreen(false);
      $("#myVideo").fullScreen(false);
      

      查询全屏模式

      简单地不传递参数来fullScreen查询当前状态。当全屏模式处于活动状态,false如果未激活或null浏览器根本不支持全屏模式,该方法将返回当前的全屏元素(如果浏览器不支持,则返回true)。因此,只有当浏览器支持全屏模式时,您才可以使用此方法显示全屏按钮:

      $("#fullscreenButton").toggle($(document).fullScreen() != null))
      

      切换全屏模式

      该插件为简单的全屏模式切换提供了另一种方法:

      $(document).toggleFullScreen();
      

      通知

      fullscreenchange当全屏模式更改时,插件会在文档上触发事件。如果浏览器拒绝全屏状态更改,则插件会触发fullscreenerror文档上的事件。例:

      $(document).bind("fullscreenchange", function() {
          console.log("Fullscreen " + ($(document).fullScreen() ? "on" : "off"));
      });
      
      $(document).bind("fullscreenerror", function() {
          alert("Browser rejected fullscreen change");
      });
      

      全屏iframe

      默认情况下,不允许在iframe中输入全屏模式,但可以使用iframe上的一些属性启用它:

      <iframe src="iframe.html" webkitAllowFullScreen mozAllowFullScreen allowFullScreen>
      </iframe>
      

      已知的问题

      • 在IE 11中,从iframe中输入全屏时会显示空白页面。不知道为什么。欢迎任何帮助。
      • 在Safari中(至少在Safari 7中)在全屏模式下不允许键盘输入。
      目录
      目录