6

我看了以下文章和 jquery 插件

http://www.sitepoint.com/html5-full-screen-api/

http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

http://xme.im/display-fullscreen-website-using-javascript

http://feross.org/html5-fullscreen-api-attack/

http://jquery.pupunzi.com/questions/696/ie-containerplus-full-screen

IE Chrome框架全屏

但是找不到。

所有这些主要文章都参考了，但我找不到任何直接谈论IE全屏功能的文章，有没有人找到相同的解决方法？

我尝试了 W3C 提案

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

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

4

10 回答 10

7

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>

享受 ！

于 2014-11-26T10:36:32.497 回答
3

Internet Explorer 全屏模式？

通过 javascript 将窗口设置为全屏（真正的全屏；F11 功能）

SO的这两篇文章将对您有所帮助。

<script type="text/javascript">
    function max() {
        var wscript = new ActiveXObject("Wscript.shell");
        wscript.SendKeys("{F11}");
    }
</script>
于 2012-11-22T10:28:02.390 回答
3

根据这个站点，IE 不支持全屏 API。似乎也没有关于这是否会被 IE11 支持的信息。

根据 MDN关于全屏的文章，似乎这种技术对于大多数浏览器来说仍然是非常实验性的。

于 2012-11-21T22:22:24.320 回答
2

这将解决您的所有问题展开是用于全屏的按钮的 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
            }
        });

ps会链接对你有很大帮助。： http: //msdn.microsoft.com/en-us/library/ie/dn254939 (v=vs.85).aspx

于 2014-02-03T06:41:17.887 回答
1

在 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
于 2014-07-16T08:52:42.617 回答
0

从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();
});
于 2015-03-31T05:21:22.623 回答
0

我回顾了我上面所说的（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”退出

于 2019-03-03T13:42:29.680 回答
0

当浏览器切换到全屏并且用户按下 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);
 }
于 2019-03-13T16:47:23.560 回答
0

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

}
}
}
于 2019-03-03T09:44:23.037 回答
0

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
}
});
于 2019-01-08T07:16:53.517 回答