如何使用JavaScript使访问者的浏览器全屏显示,同时兼容IE、Firefox和Opera?
当前回答
新的html5技术-全屏API给了我们一个简单的方法 以全屏模式显示网页内容。我们即将付出 全屏模式的详细信息。试着 想象一下你可以利用它得到的所有可能的好处 技术-全屏相册,视频,甚至游戏。
但在我们描述这项新技术之前,我必须指出,这项技术是实验性的,所有主流浏览器都支持它。
你可以在这里找到完整的教程:http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/
这里是工作演示:http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm
其他回答
创建函数
function toggleFullScreen() {
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
$scope.topMenuData.showSmall = true;
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
$scope.topMenuData.showSmall = false;
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
在Html中放代码像
<ul class="unstyled-list fg-white">
<li class="place-right" data-ng-if="!topMenuData.showSmall" data-ng-click="toggleFullScreen()">Full Screen</li>
<li class="place-right" data-ng-if="topMenuData.showSmall" data-ng-click="toggleFullScreen()">Back</li>
</ul>
以下是我对全屏和退出全屏的完整解决方案(非常感谢上面塔的回答):
$(document).ready(function(){
$.is_fs = false;
$.requestFullScreen = function(calr)
{
var element = document.body;
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
$.is_fs = true;
$(calr).val('Exit Full Screen');
}
$.cancel_fs = function(calr)
{
var element = document; //and NOT document.body!!
var requestMethod = element.exitFullScreen || element.mozCancelFullScreen || element.webkitExitFullScreen || element.mozExitFullScreen || element.msExitFullScreen || element.webkitCancelFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
$(calr).val('Full Screen');
$.is_fs = false;
}
$.toggleFS = function(calr)
{
$.is_fs == true? $.cancel_fs(calr):$.requestFullScreen(calr);
}
});
// 调用:
<input type="button" value="Full Screen" onclick="$.toggleFS(this);" />
这个函数非常好用
function toggle_full_screen()
{
if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen))
{
if (document.documentElement.requestFullScreen){
document.documentElement.requestFullScreen();
}
else if (document.documentElement.mozRequestFullScreen){ /* Firefox */
document.documentElement.mozRequestFullScreen();
}
else if (document.documentElement.webkitRequestFullScreen){ /* Chrome, Safari & Opera */
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
else if (document.msRequestFullscreen){ /* IE/Edge */
document.documentElement.msRequestFullscreen();
}
}
else
{
if (document.cancelFullScreen){
document.cancelFullScreen();
}
else if (document.mozCancelFullScreen){ /* Firefox */
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen){ /* Chrome, Safari and Opera */
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen){ /* IE/Edge */
document.msExitFullscreen();
}
}
}
要使用它,只需调用:
toggle_full_screen();
简单的例子:http://www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capabilities/
<script type="text/javascript">
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
}
</script>
<img class="video_player" src="image.jpg" id="player"></img>
<button onclick="goFullscreen('player'); return false">Click Me To Go Fullscreen! (For real)</button>
如果你是在一个“售货亭”的情况下,一个进入全屏的Q&D方法是在浏览器窗口启动并运行后输入一个F11。这不是一个很好的开始,用户可能可以在顶部戳一个触摸屏,获得半全屏的视图,但在紧急情况下,或者只是为了开始一个项目,可以使用F11。