插件 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中)在全屏模式下不允许键盘输入。

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

目前重心已经放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>