ok nên một vài ý tưởng.
trước hết là lý do tại sao nó không hoạt động khi bạn nhấn nút thoát. rất đơn giản vì jquery của bạn không được thực hiện. để giải quyết vấn đề làm mới, bạn có thể đặt cookie cho biết thời tiết trình duyệt đang ở chế độ toàn màn hình hay không và nếu bạn có thể làm cho toàn màn hình trở thành sự kiện sẵn sàng trên trang. tôi muốn đề xuất một ý tưởng mới cho bạn
dưới đây là một sao chép hoàn toàn bản demo pasteable của api toàn màn hình
tôi muốn làm nổi bật một đoạn
fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
if (fullScreenApi.isFullScreen()) {
fsStatus.innerHTML = 'Whoa, you went fullscreen';
} else {
fsStatus.innerHTML = 'Back to normal';
}
}, true);
bạn có thể thêm mã trong này sự kiện để xử lý khi người dùng rời khỏi chế độ toàn màn hình. và chỉ cần chạy của bạn giảm thiểu methhod
<!DOCTYPE html>
<html>
<head>
<title>FullScreen API</title>
<style>
body {
background: #F3F5FA;
}
#container {
width: 600px;
padding: 30px;
background: #F8F8F8;
border: solid 1px #ccc;
color: #111;
margin: 20px auto;
border-radius: 3px;
}
#specialstuff {
background: #33e;
padding: 20px;
margin: 20px;
color: #fff;
}
#specialstuff a {
color: #eee;
}
#fsstatus {
background: #e33;
color: #111;
}
#fsstatus.fullScreenSupported {
background: #3e3;
}
</style>
</head>
<body>
<div id="container">
<div id="specialstuff">
<p>Inside here is special stuff which will go fullscreen</p>
<p>As of 10/20/2011, you'll need Safari 5.1, <a href="http://tools.google.com/dlpage/chromesxs">Chrome Canary</a>, or <a href="http://nightly.mozilla.org/">Firefox Nightly</a>
<p>Status: <span id="fsstatus"></span>
</div>
<input type="button" value="Go Fullscreen" id="fsbutton" />
<p>
</p>
</div>
<script>
(function() {
var
fullScreenApi = {
supportsFullScreen: false,
isFullScreen: function() { return false; },
requestFullScreen: function() {},
cancelFullScreen: function() {},
fullScreenEventName: '',
prefix: ''
},
browserPrefixes = 'webkit moz o ms khtml'.split(' ');
// check for native support
if (typeof document.cancelFullScreen != 'undefined') {
fullScreenApi.supportsFullScreen = true;
} else {
// check for fullscreen support by vendor prefix
for (var i = 0, il = browserPrefixes.length; i < il; i++) {
fullScreenApi.prefix = browserPrefixes[i];
if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined') {
fullScreenApi.supportsFullScreen = true;
break;
}
}
}
// update methods to do something useful
if (fullScreenApi.supportsFullScreen) {
fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
fullScreenApi.isFullScreen = function() {
switch (this.prefix) {
case '':
return document.fullScreen;
case 'webkit':
return document.webkitIsFullScreen;
default:
return document[this.prefix + 'FullScreen'];
}
}
fullScreenApi.requestFullScreen = function(el) {
return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
}
fullScreenApi.cancelFullScreen = function(el) {
return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
}
}
// jQuery plugin
if (typeof jQuery != 'undefined') {
jQuery.fn.requestFullScreen = function() {
return this.each(function() {
var el = jQuery(this);
if (fullScreenApi.supportsFullScreen) {
fullScreenApi.requestFullScreen(el);
}
});
};
}
// export api
window.fullScreenApi = fullScreenApi;
})();
</script>
<script>
// do something interesting with fullscreen support
var fsButton = document.getElementById('fsbutton'),
fsElement = document.getElementById('specialstuff'),
fsStatus = document.getElementById('fsstatus');
if (window.fullScreenApi.supportsFullScreen) {
fsStatus.innerHTML = 'YES: Your browser supports FullScreen';
fsStatus.className = 'fullScreenSupported';
// handle button click
fsButton.addEventListener('click', function() {
window.fullScreenApi.requestFullScreen(fsElement);
}, true);
fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
if (fullScreenApi.isFullScreen()) {
fsStatus.innerHTML = 'Whoa, you went fullscreen';
} else {
fsStatus.innerHTML = 'Back to normal';
}
}, true);
} else {
fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen';
}
</script>
</body>
</html>
dưới đây tôi có một phiên bản cập nhật của jquery bạn
jQuery('.fullScreen').click(function(){
maximize();
});
jQuery('.minimize').click(function(){
minimize();
});
function maximize(){
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
jQuery('.fullScreen').css({'display' : 'none'});
jQuery('.minimize').css({'display' : 'block'});
}
function minimize(){
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
jQuery('.fullScreen').css({'display' : 'block'});
jQuery('.minimize').css({'display' : 'none'});
}
một lưu ý importent
FullScreenChanged sự kiện - Các W3C và Webkit lửa sự kiện fullscreenchanged trên phần tử đi toàn màn hình, nhưng Mozilla sẽ kích hoạt sự kiện trên đối tượng tài liệu.
Nó hoạt động bình thường trong Chrome của tôi (v 20). Bạn có thể nhận thêm thông tin về phiên bản trình duyệt và cách triển khai của bạn giảm thiểu (nếu bạn không thoát bằng F11)? –
Tôi đã thêm chức năng này vào bài đăng đầu tiên. Tôi đang sử dụng Chrome v22.0.1229.94 m. – Ziggy