html5文本框全屏,HTML5 实现全屏的API（webkitRequestFullscreen）使用实例
JavaScript
语言：
JaveScriptBabelCoffeeScript
确定
var enterFullscreen = function(el) {
if (el.requestFullscreen) {
el.requestFullscreen();
} else if (el.msRequestFullscreen) {
el.msRequestFullscreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
} else {
noFullscreenSupport();
}
};
var exitFullscreen = function() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else {
noFullscreenSupport();
}
};
var noFullscreenSupport = function() {
alert('Your browser does not support the Fullscreen API.');
};
var fullscreenButton = document.getElementById('fullscreen-button');
fullscreenButton.addEventListener('click', function(e) {
e.preventDefault();
if ((window.innerWidth === screen.width && window.innerHeight === screen.height) || (window.fullScreen)) {
exitFullscreen();
} else {
enterFullscreen(document.documentElement);
}
});
var eventList = ["fullscreenchange", "MSFullscreenChange", "mozfullscreenchange", "webkitfullscreenchange"];
for (event of eventList) {
window.addEventListener(event, function() {
if (fullscreenButton.querySelector('.fa').classList.contains('fa-compress')) {
fullscreenButton.querySelector('.fa').classList.add('fa-expand');
fullscreenButton.querySelector('.fa').classList.remove('fa-compress');
} else if (fullscreenButton.querySelector('.fa').classList.contains('fa-expand')) {
fullscreenButton.querySelector('.fa').classList.remove('fa-expand');
fullscreenButton.querySelector('.fa').classList.add('fa-compress');
}
});
}