jquery 全屏插件“jQuery Fullscreen Plugin”使用

小渣渣

今天工作中，遇到了一个网页全屏显示的需求，于是查了一下百度，发现了一个网页全屏显示的jQuery插件：jquery FullScreen Plugin 。他可以实现网页的全屏显示，适用各种不同的浏览器，包括FF 10, Chrome 和 Safari，它用于为用户提供了一个更容易阅读的网页版本，可缩放<canvas>和<video>元素。

jQuery Fullscreen Plugin

Description

This jQuery plugin provides a simple to use mechanism to control the new fullscreen mode of modern browsers. Currently only newer Webkit-based browsers (Like Chrome and Safari), Firefox and IE11+ provide this new fullscreen feature.

Usage

Entering Fullscreen mode

You can either switch the whole page or a single HTML element to fullscreen mode:

$(document).fullScreen(true);
$("#myVideo").fullScreen(true);
This only works when the code was triggered by a user interaction (For example a onclick event on a button). Browsers don't allow entering fullscreen mode without user interaction.

Exiting Fullscreen mode

Fullscreen mode is always exited via the document but this plugin allows it also via any HTML element. The owner document of the selected HTML element is used then:

$(document).fullScreen(false);
$("#myVideo").fullScreen(false);
Querying Fullscreen mode

Simply pass no argument to the fullScreen method to query the current state. The method returns the current fullscreen element (or true if browser doesn't support this) when fullscreen mode is active, false if not active or null when the browser does not support fullscreen mode at all. So you can use this method also to display a fullscreen button only when the browser supports fullscreen mode:

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

The plugin provides another method for simple fullscreen mode toggling:

$(document).toggleFullScreen();
Notifications

The plugin triggers a fullscreenchange event on the document when the fullscreen mode has been changed. If the browser rejected a fullscreen state change then the plugin triggers a fullscreenerror event on the document. Example:

$(document).bind("fullscreenchange", function() {
    console.log("Fullscreen " + ($(document).fullScreen() ? "on" : "off"));
});

$(document).bind("fullscreenerror", function() {
    alert("Browser rejected fullscreen change");
});
Fullscreen iframe

Entering fullscreen mode from within an iframe is not allowed by default but it can be enabled with a few attributes on the iframe:

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

In IE 11 an empty page is displayed when entering fullscreen from within an iframe. No idea why. Any help is welcome.
In Safari (At least in Safari 7) no keyboard input is allowed in fullscreen mode.

github地址：https://github.com/kayahr/jquery-fullscreen-plugin

游客，如果您要查看本帖隐藏内容请回复

夏天

你都难道就是传说中的全栈工程师！

子非鱼

111111111111111111

heshipei

好像好厉害的样子