//调用全屏
$('.request-fullscreen').on('click', function() {
// Check for fullscreen browser support
if (screenCheck) {
if ($.fullscreen.isFullScreen()) {
$.fullscreen.exit();
}
else {
selector.fullscreen({
overflow: 'auto'
});
}
} else {
alert('您的浏览器不支付全屏模式.')
}
});
//扩展
(function($) {
function defined(a) {
return typeof a !== 'undefined';
}
function extend(child, parent, prototype) {
var F = function() {};
F.prototype = parent.prototype;
child.prototype = new F();
child.prototype.constructor = child;
parent.prototype.constructor = parent;
child._super = parent.prototype;
if (prototype) {
$.extend(child.prototype, prototype);
}
}
var SUBST = [
['', ''], // spec
['exit', 'cancel'], // firefox & old webkits expect cancelFullScreen instead of exitFullscreen
['screen', 'Screen'] // firefox expects FullScreen instead of Fullscreen
];
var VENDOR_PREFIXES = ['', 'o', 'ms', 'moz', 'webkit', 'webkitCurrent'];
function native(obj, name) {
var prefixed;
if (typeof obj === 'string') {
name = obj;
obj = document;
}
for (var i = 0; i < SUBST.length; ++i) {
name = name.replace(SUBST[i][0], SUBST[i][1]);
for (var j = 0; j < VENDOR_PREFIXES.length; ++j) {
prefixed = VENDOR_PREFIXES[j];
prefixed += j === 0 ? name : name.charAt(0).toUpperCase() + name.substr(1);
if (defined(obj[prefixed])) {
return obj[prefixed];
}
}
}
return void 0;
}var ua = navigator.userAgent;
var fsEnabled = native('fullscreenEnabled');
var IS_ANDROID_CHROME = ua.indexOf('Android') !== -1 && ua.indexOf('Chrome') !== -1;
var IS_NATIVELY_SUPPORTED =
!IS_ANDROID_CHROME &&
defined(native('fullscreenElement')) &&
(!defined(fsEnabled) || fsEnabled === true);
var version = $.fn.jquery.split('.');
var JQ_LT_17 = (parseInt(version[0]) < 2 && parseInt(version[1]) < 7);
var FullScreenAbstract = function() {
this.__options = null;
this._fullScreenElement = null;
this.__savedStyles = {};
};
FullScreenAbstract.prototype = {
_DEFAULT_OPTIONS: {
styles: {
'boxSizing': 'border-box',
'MozBoxSizing': 'border-box',
'WebkitBoxSizing': 'border-box'
},
toggleClass: null
},
__documentOverflow: 'visible',
__htmlOverflow: 'visible',
_preventDocumentScroll: function() {
// Disabled ability
this.__documentOverflow = $('body')[0].style.overflow;
this.__htmlOverflow = $('html')[0].style.overflow;
},
_allowDocumentScroll: function() {
$('body')[0].style.overflow = this.__documentOverflow;
$('html')[0].style.overflow = this.__htmlOverflow;
},
_fullScreenChange: function() {
if (!this.__options)
return; // only process fullscreenchange events caused by this plugin
if (!this.isFullScreen()) {
this._allowDocumentScroll();
this._revertStyles();
this._triggerEvents();
this._fullScreenElement = null;
} else {
this._preventDocumentScroll();
this._triggerEvents();
}
},
_fullScreenError: function(e) {
if (!this.__options)
return; // only process fullscreenchange events caused by this plugin
this._revertStyles();
this._fullScreenElement = null;
if (e) {
$(document).trigger('fscreenerror', [e]);
}
},
_triggerEvents: function() {
$(this._fullScreenElement).trigger(this.isFullScreen() ? 'fscreenopen' : 'fscreenclose');
$(document).trigger('fscreenchange', [this.isFullScreen(), this._fullScreenElement]);
},
_saveAndApplyStyles: function() {
var $elem = $(this._fullScreenElement);
this.__savedStyles = {};
for (var property in this.__options.styles) {
// save
this.__savedStyles[property] = this._fullScreenElement.style[property];
// apply
this._fullScreenElement.style[property] = this.__options.styles[property];
}
if (this.__options.toggleClass) {
$elem.addClass(this.__options.toggleClass);
}
},
_revertStyles: function() {
var $elem = $(this._fullScreenElement);
for (var property in this.__options.styles) {
this._fullScreenElement.style[property] = this.__savedStyles[property];
}
if (this.__options.toggleClass) {
$elem.removeClass(this.__options.toggleClass);
}
},
open: function(elem, options) {
// do nothing if request is for already fullscreened element
if (elem === this._fullScreenElement) {
return;
}
// exit active fullscreen before opening another one
if (this.isFullScreen()) {
this.exit();
}
// save fullscreened element
this._fullScreenElement = elem;
// apply options, if any
this.__options = $.extend(true, {}, this._DEFAULT_OPTIONS, options);
// save current element styles and apply new
this._saveAndApplyStyles();
},
exit: null,
isFullScreen: null,
isNativelySupported: function() {
return IS_NATIVELY_SUPPORTED;
}
};
var FullScreenNative = function() {
FullScreenNative._super.constructor.apply(this, arguments);
this.exit = $.proxy(native('exitFullscreen'), document);
this._DEFAULT_OPTIONS = $.extend(true, {}, this._DEFAULT_OPTIONS, {
'styles': {
'width': '100%',
'height': '100%'
}
});
$(document)
.bind(this._prefixedString('fullscreenchange') + ' MSFullscreenChange', $.proxy(this._fullScreenChange, this))
.bind(this._prefixedString('fullscreenerror') + ' MSFullscreenError', $.proxy(this._fullScreenError, this));
};
extend(FullScreenNative, FullScreenAbstract, {
VENDOR_PREFIXES: ['', 'o', 'moz', 'webkit'],
_prefixedString: function(str) {
return $.map(this.VENDOR_PREFIXES, function(s) {
return s + str;
}).join(' ');
},
open: function(elem, options) {
FullScreenNative._super.open.apply(this, arguments);
var requestFS = native(elem, 'requestFullscreen');
requestFS.call(elem);
},
exit: $.noop,
isFullScreen: function() {
return native('fullscreenElement') !== null;
},
element: function() {
return native('fullscreenElement');
}
});
var FullScreenFallback = function() {
FullScreenFallback._super.constructor.apply(this, arguments);
this._DEFAULT_OPTIONS = $.extend({}, this._DEFAULT_OPTIONS, {
'styles': {
'position': 'fixed',
'zIndex': '2147483647',
'left': 0,
'top': 0,
'bottom': 0,
'right': 0
}
});
this.__delegateKeydownHandler();
};
extend(FullScreenFallback, FullScreenAbstract, {
__isFullScreen: false,
__delegateKeydownHandler: function() {
var $doc = $(document);
$doc.delegate('*', 'keydown.fullscreen', $.proxy(this.__keydownHandler, this));
var data = JQ_LT_17 ? $doc.data('events') : $._data(document).events;
var events = data['keydown'];
if (!JQ_LT_17) {
events.splice(0, 0, events.splice(events.delegateCount - 1, 1)[0]);
} else {
data.live.unshift(data.live.pop());
}
},
__keydownHandler: function(e) {
if (this.isFullScreen() && e.which === 27) {
this.exit();
return false;
}
return true;
},
_revertStyles: function() {
FullScreenFallback._super._revertStyles.apply(this, arguments);
// force redraw (fixes bug in IE7 with content dissapearing)
this._fullScreenElement.offsetHeight;
},
open: function(elem) {
FullScreenFallback._super.open.apply(this, arguments);
this.__isFullScreen = true;
this._fullScreenChange();
},
exit: function() {
this.__isFullScreen = false;
this._fullScreenChange();
},
isFullScreen: function() {
return this.__isFullScreen;
},
element: function() {
return this.__isFullScreen ? this._fullScreenElement : null;
}
});
$.fullscreen = IS_NATIVELY_SUPPORTED ? new FullScreenNative() : new FullScreenFallback();
$.fn.fullscreen = function(options) {
var elem = this[0];
options = $.extend({toggleClass: null, overflow: 'hidden'}, options);
options.styles = {overflow: options.overflow};
delete options.overflow;
if (elem) {
$.fullscreen.open(elem, options);
}
return this;
};
})(jQuery);
网友评论