Zig*_*ggy 5 javascript google-chrome fullscreen
我有个问题.全屏请求在Firefox中运行良好,但在Chrome中,当我请求并取消全屏时,我无法再次请求它(F11正常工作).此外,当我重新加载页面时,它取消全屏.
jQuery('.fullScreen').click(function(){
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'});
});
最小化:
jQuery('.minimize').click(function(){
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'});
});
此外,当我按全屏显示esc时,它会最小化,但我无法使用我的按钮返回全屏.
好的，有几个想法。
\n\n首先是按下退出按钮时它不起作用的原因。很简单，因为你的 jquery 没有被执行。要解决刷新问题，您可以放置一个 cookie，说明浏览器是否处于全屏状态，如果是，您可以在页面就绪事件上将其设置为全屏。我想向你提出一个新想法
\n\n下面是全屏 api 的完全复制粘贴演示
\n\n我想强调一个片段
\n\n fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {\n if (fullScreenApi.isFullScreen()) {\n fsStatus.innerHTML = \'Whoa, you went fullscreen\';\n } else {\n fsStatus.innerHTML = \'Back to normal\';\n }\n}, true);\n您可以在此事件中添加代码来处理用户何时离开全屏模式。然后运行你的最小化方法
\n\n <!DOCTYPE html>\n <html>\n <head>\n <title>FullScreen API</title>\n\n <style>\n body {\n background: #F3F5FA;\n }\n #container {\n width: 600px;\n padding: 30px;\n background: #F8F8F8;\n border: solid 1px #ccc;\n color: #111;\n margin: 20px auto;\n border-radius: 3px;\n }\n\n #specialstuff {\n background: #33e;\n padding: 20px;\n margin: 20px;\n color: #fff;\n }\n #specialstuff a {\n color: #eee;\n }\n\n #fsstatus {\n background: #e33;\n color: #111;\n }\n\n #fsstatus.fullScreenSupported {\n background: #3e3;\n }\n </style>\n </head>\n <body>\n <div id="container">\n <div id="specialstuff">\n <p>Inside here is special stuff which will go fullscreen</p>\n <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>\n <p>Status: <span id="fsstatus"></span>\n </div>\n\n <input type="button" value="Go Fullscreen" id="fsbutton" />\n <p>\n </p>\n </div>\n\n\n <script>\n\n (function() {\n var \n fullScreenApi = { \n supportsFullScreen: false,\n isFullScreen: function() { return false; }, \n requestFullScreen: function() {}, \n cancelFullScreen: function() {},\n fullScreenEventName: \'\',\n prefix: \'\'\n },\n browserPrefixes = \'webkit moz o ms khtml\'.split(\' \');\n\n // check for native support\n if (typeof document.cancelFullScreen != \'undefined\') {\n fullScreenApi.supportsFullScreen = true;\n } else { \n // check for fullscreen support by vendor prefix\n for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {\n fullScreenApi.prefix = browserPrefixes[i];\n\n if (typeof document[fullScreenApi.prefix + \'CancelFullScreen\' ] != \'undefined\' ) {\n fullScreenApi.supportsFullScreen = true;\n\n break;\n }\n }\n }\n\n // update methods to do something useful\n if (fullScreenApi.supportsFullScreen) {\n fullScreenApi.fullScreenEventName = fullScreenApi.prefix + \'fullscreenchange\';\n\n fullScreenApi.isFullScreen = function() {\n switch (this.prefix) { \n case \'\':\n return document.fullScreen;\n case \'webkit\':\n return document.webkitIsFullScreen;\n default:\n return document[this.prefix + \'FullScreen\'];\n }\n }\n fullScreenApi.requestFullScreen = function(el) {\n return (this.prefix === \'\') ? el.requestFullScreen() : el[this.prefix + \'RequestFullScreen\']();\n }\n fullScreenApi.cancelFullScreen = function(el) {\n return (this.prefix === \'\') ? document.cancelFullScreen() : document[this.prefix + \'CancelFullScreen\']();\n } \n }\n\n // jQuery plugin\n if (typeof jQuery != \'undefined\') {\n jQuery.fn.requestFullScreen = function() {\n\n return this.each(function() {\n var el = jQuery(this);\n if (fullScreenApi.supportsFullScreen) {\n fullScreenApi.requestFullScreen(el);\n }\n });\n };\n }\n\n // export api\n window.fullScreenApi = fullScreenApi; \n })();\n\n </script>\n\n <script>\n\n // do something interesting with fullscreen support\n var fsButton = document.getElementById(\'fsbutton\'),\n fsElement = document.getElementById(\'specialstuff\'),\n fsStatus = document.getElementById(\'fsstatus\');\n\n\n if (window.fullScreenApi.supportsFullScreen) {\n fsStatus.innerHTML = \'YES: Your browser supports FullScreen\';\n fsStatus.className = \'fullScreenSupported\';\n\n // handle button click\n fsButton.addEventListener(\'click\', function() {\n window.fullScreenApi.requestFullScreen(fsElement);\n }, true);\n\n fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {\n if (fullScreenApi.isFullScreen()) {\n fsStatus.innerHTML = \'Whoa, you went fullscreen\';\n } else {\n fsStatus.innerHTML = \'Back to normal\';\n }\n }, true);\n\n } else {\n fsStatus.innerHTML = \'SORRY: Your browser does not support FullScreen\';\n }\n\n </script>\n\n </body>\n </html>\n下面我有你的 jquery 的更新版本
\n\njQuery(\'.fullScreen\').click(function(){ \n maximize();\n});\n\njQuery(\'.minimize\').click(function(){ \n minimize();\n});\n\n\n\n\n\nfunction maximize(){\n var docElm = document.documentElement;\n\n if (docElm.requestFullscreen) {\n docElm.requestFullscreen();\n }\n\n else if (docElm.mozRequestFullScreen) {\n docElm.mozRequestFullScreen(); \n }\n\n else if (docElm.webkitRequestFullScreen) {\n docElm.webkitRequestFullScreen(); \n } \n jQuery(\'.fullScreen\').css({\'display\' : \'none\'});\n jQuery(\'.minimize\').css({\'display\' : \'block\'});\n}\n\nfunction minimize(){\n if (document.exitFullscreen) {\n document.exitFullscreen();\n }\n\n else if (document.mozCancelFullScreen) {\n document.mozCancelFullScreen();\n }\n\n else if (document.webkitCancelFullScreen) {\n document.webkitCancelFullScreen();\n } \n\n jQuery(\'.fullScreen\').css({\'display\' : \'block\'});\n jQuery(\'.minimize\').css({\'display\' : \'none\'});\n}\n重要说明
\n\nFullScreenChanged 事件 \xe2\x80\x93 W3C 和 Webkit 在全屏显示的元素上触发 fullscreenchanged 事件，但 Mozilla 在文档对象上触发该事件。
\n| 归档时间： |
|
| 查看次数： |
4572 次 |
| 最近记录： |