如何使用JavaScript使访问者的浏览器全屏显示,同时兼容IE、Firefox和Opera?
当前回答
这段代码还包括如何启用Internet Explorer 9的全屏,可能是更老的版本, 以及最新版本的谷歌Chrome。接受的答案也可以用于其他浏览器。
var el = document.documentElement
, rfs = // for newer Webkit and Firefox
el.requestFullscreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen
;
if(typeof rfs!="undefined" && rfs){
rfs.call(el);
} else if(typeof window.ActiveXObject!="undefined"){
// for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript!=null) {
wscript.SendKeys("{F11}");
}
}
来源:
Chrome全屏API(请注意,然而 requestFullscreen“只工作在”“[m]大多数UIEvents和鼠标事件,如点击和按下键等”,“所以它不能被恶意使用”) 如何使浏览器全屏使用F11键事件通过JavaScript
其他回答
在Firefox 10中,你可以使用以下javascript使当前页面全屏(没有窗口chrome的真正全屏):
window.fullScreen = true;
函数f () {plr.requestFullscreen (); document.exitFullscreen ()};plr.requestFullscreen():document.exitFullscreen()}
<!DOCTYPE html><html><head>
<style>
body{background:#000}
#plr{position:relative;background:#fff;width:360px}
#vd{width:100%;background:grey}
button{width:48px;height:48px;border:0;background:grey}
</style>
</head><body>
<div id="plr">
<video id="vd" src="video.mp4"></video>
<button onclick="(plr.offsetWidth==360)?plr.requestFullscreen():document.exitFullscreen()">fs</button>
<button onclick="plr.requestFullscreen();document.exitFullscreen()">fs2</button>
</div>
</body></html>
简单的例子: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>
幸运的是,对于毫无戒心的网络用户来说,这不能用javascript完成。你需要编写特定于浏览器的插件,如果它们还不存在的话,然后以某种方式让人们下载它们。你能得到的最接近的是一个最大化的窗口,没有工具或导航栏,但用户仍然能够看到url。
窗口.open(“http://www.wege.com”,“标题”,“类型”=fullWindow, fullscreen, scrollbars=yes);“>
这通常被认为是不好的做法,因为它从用户那里删除了很多浏览器功能。
如果你是在一个“售货亭”的情况下,一个进入全屏的Q&D方法是在浏览器窗口启动并运行后输入一个F11。这不是一个很好的开始,用户可能可以在顶部戳一个触摸屏,获得半全屏的视图,但在紧急情况下,或者只是为了开始一个项目,可以使用F11。