ठीक है तो कुछ विचार।
सबसे पहले कारण यह है कि जब आप एस्केप बटन दबाते हैं तो यह काम नहीं करता है। बहुत आसान है क्योंकि आपका jquery निष्पादित नहीं किया जा रहा है। रीफ्रेश समस्या को हल करने के लिए आप कुकी को बताते हुए एक कुकी रख सकते हैं, ब्राउज़र पूरी स्क्रीन में है या नहीं और यदि यह है कि आप पेज तैयार ईवेंट पर इसे पूर्ण स्क्रीन बना सकते हैं। मैं तुम्हें
नीचे
एक पूरी तरह से पूर्ण स्क्रीन एपीआई के pasteable डेमो कॉपी है के लिए एक नया विचार का प्रस्ताव चाहते
मैं एक स्निपेट हाइलाइट करने के
fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
if (fullScreenApi.isFullScreen()) {
fsStatus.innerHTML = 'Whoa, you went fullscreen';
} else {
fsStatus.innerHTML = 'Back to normal';
}
}, true);
आप इस में कोड जोड़ सकते हैं चाहते हैं जाएगा जब उपयोगकर्ता पूर्ण स्क्रीन मोड छोड़ देता है तो इसे संभालने के लिए ईवेंट। और बस चलाने के लिए अपनी कम से कम 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>
नीचे मैं अपने jQuery
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'});
}
एक importent टिप्पणी का एक अद्यतन संस्करण है
FullScreenChanged घटना - W3C और वेबकिट अग्नि तत्व पर fullscreenchanged घटना पूर्णस्क्रीन जा रहा है, लेकिन मोज़िला दस्तावेज़ ऑब्जेक्ट पर ईवेंट को निकाल देता है।
यह मेरे क्रोम (v 20) में ठीक से काम करता है। क्या आप ब्राउज़र संस्करण और आपके कार्यान्वयन को कम करने के बारे में अधिक जानकारी प्राप्त कर सकते हैं (यदि आप F11 से बाहर नहीं निकलते हैं)? –
मैंने इस फ़ंक्शन को पहले पोस्ट में जोड़ा है। मैं क्रोम v22.0.1229.9 4 मीटर का उपयोग कर रहा हूँ। – Ziggy