Question

我查看了以下文章和jquery插件

但无法找到。

所有这些主要文章都经过评审，但我找不到任何直接谈论IE全屏功能的文章，任何人都找到相同的解决方法吗？

我尝试过W3C提案

// W3C Proposal
element.requestFullscreen();
document.exitFullscreen();

已更新 我的期望是，我有一个图像轮播，我需要显示当前所选图像以全屏显示，似乎IE不支持，我打算使用jQuery模型窗口（没有jQuery UI）。就像example。

一样

Answer 1

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>

享受！

Answer 2

根据this site，IE不支持全屏API。似乎没有关于这是否也是IE11支持的信息。

根据MDN的article on fullscreen，对于大多数浏览器来说，这种技术似乎仍然具有实验性。

Answer 3

Internet Explorer full screen mode?

Set window to fullscreen (REAL fullscreen; F11 functionality) by javascript

来自SO的那两篇文章会对你有帮助。

<script type="text/javascript">
    function max() {
        var wscript = new ActiveXObject("Wscript.shell");
        wscript.SendKeys("{F11}");
    }
</script>

Answer 4

这将解决您的所有问题 expand是用于全屏的按钮的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。将链接将是一个很大的帮助。：http://msdn.microsoft.com/en-us/library/ie/dn254939(v=vs.85).aspx

Answer 5

在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

Answer 6

从MSDN website获取（并进行了修改，因为它们具有丑陋的编码习惯，当你缩小时会将你抓到脚跟中）

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();
});

Answer 7

vidWha是我的视频元素的ID。

全屏显示是我全屏按钮的ID。

此代码在所有浏览器上均有效。经过测试。

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
}
});

Answer 8

这是Opera和Chrome的真实功能示例，因为它们具有相同的API。 IE和Safari不支持它。

addEventListener对已经具有事件的对象无效，这就是为什么将其称为Object.addEventListener。

对于DIV对象，mediv.onmouseX = function () {code ...}绰绰有余；不需要mediv.addEventListener，因为div对象已经有鼠标事件。

要全屏检查此示例：

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......

}
}
}

Answer 9

我查看了我上面说的（0_0）

经过大量研究和测试，这里的脚本可以在IE，EDGE，CHROME，FIREFOX和OPERA上很好地运行。它在SAFARI 5.1版上不起作用。我希望这能帮到您... 要对其进行测试，请创建一个html按钮并调用该函数

设置为完整：

 setfullscreen(true);

已满：

 setfullscreen(false);

***此脚本不需要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();
                    }
  }

  }

如果要检测DIV对象的键盘使用情况，只需添加简单的代码

var mediv = document.getElementById('mediv');
mediv.onkeyup = function(){ if(condition) {setfullscreen(false);}}

**我忘了告诉您EDGE使用WEBKIT。 Chrome使用DOM激活屏幕，但使用“ exitFullscreen”退出

Answer 10

当浏览器变为全屏并且用户按下ESCAPE键时，它不会返回键事件。

解决方案是使用计时器来检测DIV或其他对象是否发生更改。

我们将更改为全屏的按钮的真假值存储在变量中

我们启动计时器并仅在大小已更改的情况下运行代码。例子...

 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);
 }

如何启用像Firefox和Chrome这样的IE全屏功能

10 个答案: