Javascript 如何启用 IE 全屏功能，如 firefox 和 chrome
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13503016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to enable IE full-screen feature like firefox and chrome
提问by Sameera Thilakasiri
I looked following articles and jquery plugins
我看了以下文章和 jquery 插件
http://www.sitepoint.com/html5-full-screen-api/
http://www.sitepoint.com/html5-full-screen-api/
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/
http://xme.im/display-fullscreen-website-using-javascript
http://xme.im/display-fullscreen-website-using-javascript
http://feross.org/html5-fullscreen-api-attack/
http://feross.org/html5-fullscreen-api-attack/
http://jquery.pupunzi.com/questions/696/ie-containerplus-full-screen
http://jquery.pupunzi.com/questions/696/ie-containerplus-full-screen
But couldnt find.
但是找不到。
All those major articles refereed, but I couldn't find any article which directly talking about IE full-screen feature, Any one found workaround to the same?
所有这些主要文章都参考了，但我找不到任何直接谈论IE全屏功能的文章，有没有人找到相同的解决方法？
I tried W3C proposal
我尝试过 W3C 提案
// W3C Proposal
element.requestFullscreen();
document.exitFullscreen();
UPDATEDMy expectation is, I have an image carousel, I need to show current selected image to show in full screen, seems to IE doesn't support, I plan to use jQuery model window(without jQuery UI). Just as the example.
更新我的期望是，我有一个图像轮播，我需要显示当前选定的图像以全屏显示，似乎 IE 不支持，我打算使用 jQuery 模型窗口（没有 jQuery UI）。就像例子一样。
回答by Ottothesampler
sheelpriy answer is good with a small change, successfully tested on chrome, firefox, ie, safari and opera (all last version)
sheelpriy 的答案很好，只需稍作改动，在 chrome、firefox 上成功测试，即 safari 和 opera（所有最新版本）
//HTML Button : <a href="#" id="fullscreen">Fullscreen</a>
<script type="text/javascript">
//Get element id "fullscreen"
var fullScreenButton = document.getElementById("fullscreen");
//Activate click listener
fullScreenButton.addEventListener("click", function () {
//Toggle fullscreen off, activate it
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen(); // Firefox
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(); // Chrome and Safari
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen(); // IE
}
//Toggle fullscreen on, exit fullscreen
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
});
</script>
Enjoy !
享受 ！
回答by Christofer Eliasson
According to this sitethe fullscreen API is not supported in IE. There seem to be no information on whether this is something that will be supported by IE11 either.
根据此站点，IE 不支持全屏 API。似乎也没有关于 IE11 是否支持的信息。
According to MDN's article on fullscreenit seems that this technique is still be very much experimental for most browsers.
回答by samuk
Internet Explorer full screen mode?
Set window to fullscreen (REAL fullscreen; F11 functionality) by javascript
通过javascript将窗口设置为全屏（真正的全屏；F11功能）
Those two articles from SO will help you.
SO的这两篇文章会帮助你。
<script type="text/javascript">
function max() {
var wscript = new ActiveXObject("Wscript.shell");
wscript.SendKeys("{F11}");
}
</script>
回答by sheelpriy
this will solve all your problems expand is the id of button used for fullscreen
这将解决您的所有问题 展开是用于全屏的按钮的 id
var fullScreenButton = document.getElementById("expand");
fullScreenButton.addEventListener("click", function () {
if (mediaPlayer.requestFullscreen) {
mediaPlayer.requestFullscreen();
} else if (mediaPlayer.mozRequestFullScreen) {
mediaPlayer.mozRequestFullScreen(); // Firefox
} else if (mediaPlayer.webkitRequestFullscreen) {
mediaPlayer.webkitRequestFullscreen(); // Chrome and Safari
}
else if (mediaPlayer.msRequestFullscreen) {
mediaPlayer.msRequestFullscreen(); // IE
}
});
p.s. will link would be a great help for you. : http://msdn.microsoft.com/en-us/library/ie/dn254939(v=vs.85).aspx
ps will link 对你有很大帮助。：http: //msdn.microsoft.com/en-us/library/ie/dn254939(v=vs.85).aspx
回答by Nand
Switcching fullscreen via scripts is Impossible in IE10 and below untill you don't tweak its security setting as present under -
在 IE10 及更低版本中，通过脚本切换全屏是不可能的，除非您不调整其安全设置 -
Tools->Internet Options->Security tab->click Custom Level button ->
find "Initialize and script ActiveX control not marked as safe." option -> change it to Enable
回答by r3wt
Take from the MSDN website(and modified because they have ugly coding practices that will snap you in the heel when you minify)
从MSDN 网站上获取（并进行了修改，因为它们有丑陋的编码实践，当你缩小时会让你陷入困境）
var someElement = document.getElementById('fullscreen-toggle');
someElement.addEventListener('click',function(e){
var divObj = document.body; //change to whatever element you want
if (divObj.requestFullscreen){
if (document.fullScreenElement) {
document.cancelFullScreen();
} else {
divObj.requestFullscreen();
}
}
else if (divObj.msRequestFullscreen){
if (document.msFullscreenElement) {
document.msExitFullscreen();
} else {
divObj.msRequestFullscreen();
}
}
else if (divObj.mozRequestFullScreen){
if (document.mozFullScreenElement) {
document.mozCancelFullScreen();
} else {
divObj.mozRequestFullScreen();
}
}
else if (divObj.webkitRequestFullscreen){
if (document.webkitFullscreenElement) {
document.webkitCancelFullScreen();
} else {
divObj.webkitRequestFullscreen();
}
}
e.stopPropagation();
});
回答by Vivek Singh
vidWha is the id of my video element.
vidWha 是我的视频元素的 id。
full-screen is the id of my full-screen button.
full-screen 是我的全屏按钮的 id。
this code is working on all the browsers.Tested.
此代码适用于所有浏览器。经过测试。
var video = document.getElementById('vidWha');
var fullScreenButton = document.getElementById('full-screen');
// Event listener for the full-screen button
fullScreenButton.addEventListener("click", function() {
if (video.requestFullscreen) {
video.requestFullscreen();
}else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen(); // Firefox
}else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen(); // Chrome and Safari
}else if (video.msRequestFullscreen) {
video.msRequestFullscreen(); // IE
}
});
回答by Cherif
Here is a real functional example for Opera and Chrome since they have the same API. IE and Safari does not support it.
这是 Opera 和 Chrome 的真实功能示例，因为它们具有相同的 API。IE 和 Safari 不支持它。
addEventListeneris useless on objects that already have events, that's why it's called Object.addEventListener.
addEventListener对已经有事件的对象没用，这就是为什么它被称为Object.addEventListener.
For a DIV object, mediv.onmouseX = function () {code ...}is more than enough; no need for mediv.addEventListenersince the divobject already has a mouse event.
对于一个 DIV 对象，mediv.onmouseX = function () {code ...}绰绰有余；不需要，mediv.addEventListener因为div对象已经有鼠标事件。
For fullscreen check this example:
对于全屏检查这个例子：
function mefull(iffull){
var isfullscreenelement = typeof(document.fullscreenElement)=='object';
if(!isfullscreenelement || isfullscreenelement=="undefined"){
alert('Message !');
return;
}
if(iffull){
document.documentElement.requestFullscreen();
//your code here......
}else{
if (document.exitFullscreen) {
document.exitFullscreen();
//Yourcode here......
}
}
}
回答by Cherif
I review what I said above (0_0)
我回顾一下我上面所说的 (0_0)
After a lot of research and testing here is a script that works very well on IE, EDGE, CHROME, FIREFOX and OPERA. It does not work on SAFARI version 5.1. I hope this will help you... to test it create a html button and call the function
经过大量的研究和测试，这里有一个在 IE、EDGE、CHROME、FIREFOX 和 OPERA 上运行良好的脚本。它不适用于 SAFARI 5.1 版。我希望这会帮助你...测试它创建一个 html 按钮并调用该函数
Set Full :
设置完整：
setfullscreen(true);
supr full :
超满：
setfullscreen(false);
*** this script donot require addEventListner.
*** 此脚本不需要 addEventListner。
var ensuredoc = null; //reg your actual document is JS
function setfullscreen(isetting){
var domfull = (typeof(document.fullscreenElement)=='object')?1:
(typeof(document.msFullscreenElement)=='object')?2:
(typeof(document.mozFullScreenElement)=='object')?3:
(typeof(document.webkitFullscreenElement)=='object')?4:0;
if(isetting){
if(domfull >0){ ensuredoc =document; }
var docE=document.documentElement;
if(domfull ==1){
docE.requestFullscreen();
}else if(domfull ==2){
docE.msRequestFullscreen();
}else if(domfull ==3){
docE.mozRequestFullScreen();
}else if(domfull ==4){
docE.webkitRequestFullscreen();
}
}else{
if(domfull==1){
if((typeof
ensuredoc.exitFullscreen)=='function')
{ensuredoc.exitFullscreen();
}else if((typeof
ensuredoc.cancelFullScreen)=='function')
{ensuredoc.cancelFullScreen();};
}else if(domfull==2){
ensuredoc.msExitFullscreen();
}else if(domfull==3){
ensuredoc.mozCancelFullScreen();
}else if(domfull==4){
ensuredoc.webkitCancelFullScreen();
}
}
}
if you want to detect keyboard usage for a DIV object just add a simple code
如果您想检测 DIV 对象的键盘使用情况，只需添加一个简单的代码
var mediv = document.getElementById('mediv');
mediv.onkeyup = function(){ if(condition) {setfullscreen(false);}}
** I forgot to tell you that EDGE uses WEBKIT. Chrome uses the DOM to activate the screen but 'exitFullscreen' to exit
** 我忘了告诉你 EDGE 使用 WEBKIT。Chrome 使用 DOM 激活屏幕，但使用“exitFullscreen”退出
回答by Cherif
When the browser changes to fullscreen and the user presses the ESCAPE key, it does not return the key event.
当浏览器切换到全屏并且用户按下ESCAPE键时，不会返回按键事件。
The solution is to use a timer to detect whether a change takes place on a DIV or other object.
解决方案是使用计时器来检测 DIV 或其他对象是否发生更改。
We store in a variable a true or false value of a button that changes to fullscreen
我们将更改为全屏的按钮的 true 或 false 值存储在变量中
We start the timer and run the code only if the size has changed. Example...
我们启动计时器并仅在大小发生变化时运行代码。例子...
var buttonclick = false;
var MeInterval = null;
function timerscreen(){
if(buttonclicked){
if(objectdiv.offsetHeight < screen.availHeight){
your code here.....
//end timer
clearInterval(MeInterval);
}
}
}
objectdiv.onmouseup(){
buttonclicked = !buttonclicked;
if(buttonclicked) MeInterval= setInterval(timerscreen, 1000);
}
