我正在全屏工作，它工作正常，但在 Mozilla 工作不正常。请帮助它。当我进行全屏操作时，图标更改 n 当我进入原始屏幕时，图标再次更改，无法正常工作firefox extjs 版本 3.4，jquery 1.9
<script>
/*
Native FullScreen JavaScript API
-------------
Assumes Mozilla naming conventions instead of W3C for now
*/
(function() {
var fullScreenApi = {
supportsFullScreen: false,
isFullScreen: function() { return false; },
requestFullScreen: function() {},
cancelFullScreen: function() {},
fullscreenEnabled: 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;
case 'moz':
return document.mozIsFullScreen;
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);
}
});
};
}
if (typeof jQuery != 'undefined') {
jQuery.fn.mozRequestFullScreen = function() {
return this.each(function() {
var el = jQuery(this);
if (fullScreenApi.supportsFullScreen) {
fullScreenApi.requestFullScreen(el);
}
});
};
}
if (typeof jQuery != 'undefined') {
jQuery.fn.mozRequestFullScreen = function() {
return this.each(function() {
var el = jQuery(this);
if (fullScreenApi.supportsFullScreen) {
fullScreenApi.mozRequestFullScreen(el);
}
});
};
}
if (typeof jQuery != 'undefined') {
jQuery.fn.mozCancelFullScreen = function() {
return this.each(function() {
var el = jQuery(this);
if (fullScreenApi.cancelFullScreen) {
fullScreenApi.mozCancelFullScreen(el);
}
});
};
}
// export api
window.fullScreenApi = fullScreenApi;
})();
var fsButton = document.getElementById('fsbutton');
if (window.fullScreenApi.supportsFullScreen) {
//fsStatus.innerHTML = 'YES: Your browser supports FullScreen';
//fsStatus.className = 'fullScreenSupported';
// handle button click
fsButton.addEventListener('click', function() {
console.log("Browser Supports fullscreen");
document.getElementById('exitscreen').style.display='block';
document.getElementById('fullscreen').style.display='none';
//window.fullScreenApi.requestFullScreen(fsElement);
window.fullScreenApi.requestFullScreen(document.documentElement);
}, true);
} else {
console.log ("SORRY: Your browser does not support FullScreen");
}
var cfullscreen = document.getElementById('cfullscreen');
if (window.fullScreenApi.supportsFullScreen) {
//fsStatus.innerHTML = 'YES: Your browser supports FullScreen';
//fsStatus.className = 'fullScreenSupported';
// handle button click
cfullscreen.addEventListener('click', function() {
//console.log("Exit fullscreen");
document.getElementById('exitscreen').style.display='none';
document.getElementById('fullscreen').style.display='block';
//window.fullScreenApi.requestFullScreen(fsElement);
window.fullScreenApi.cancelFullScreen(document.documentElement);
}, true);
document.documentElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
if (fullScreenApi.isFullScreen()) {
document.getElementById('exitscreen').style.display='block';
document.getElementById('fullscreen').style.display='none';
console.log("Whoa, you went fullscreen");
} else {
console.log("Back to normal");
document.getElementById('fullscreen').style.display='block';
document.getElementById('exitscreen').style.display='none';
}
}, true);
} else {
console.log ("SORRY: Your browser does not support FullScreen");
}
html代码
<div id="exitscreen" style="display:none;"><a href="#">
<img src="https://cdn1.iconfinder.com/data/icons/Icon_for_MealKeeper__s_soft_by_shlyapnikova/full%20screen_16.png" id="cfullscreen"/></a></div>