全屏白衣javascript [英] Full Screen whit javascript

问题描述

i有一个apeare谷歌地图div我创建链接全屏当我点击我有我不会但当我关闭全屏时div stil有宽度和高度我给onclik这是o代码plllz帮助我和抱歉我的坏英语
 
 <   style  >  
＃map-canvas 
 {
 height：520px; 
宽度：1100px; 
 border：2px solid＃326195; 
保证金：5px; 
 
} 
 <   / style  >  
 
 <   script  >  
 function changeWidth（）{
 var e1 = document.getElementById（map-canvas）; 
 e1.style.width =100％; 
 e1.style.height =100％; 
} 
 // foction plein ecran 
 var element，fullscreenbtn; 
函数intializePlayer（）{
 element = document.getElementById（'map-canvas'）; 
 fullscreenbtn = document.getElementById（'fullscreenbtn'）; 
 //添加事件监听器
 fullscreenbtn.addEventListener（'click'，toggleFullScreen，false）; 
} 
 window.onload = intializePlayer; 
 
函数toggleFullScreen（）{
 if（element.requestFullScreen）{
 element.requestFullScreen（）; 
} else if（element.webkitRequestFullScreen）{
 element.webkitRequestFullScreen（）; 
} else if（element.mozRequestFullScreen）{
 element.mozRequestFullScreen（）; 
} 
} 
 <   / script  >  
 <  表格    id   =  form1      runat   = 服务器 >  
 
 
 <   a     href   = ＃    id   =  fullscreenbtn    style   =  z-index：10; >  plein ecran <   / a  >  
 
 
 <   div     id   =  map-canvas >  
 
 <   / div  >  
 <   / form  >  

解决方案

问题是请求和取消全屏的API挂钩是不同的;这不是自己的切换。



你需要做一些小修改：



< pre lang =Javascript> var fullScreen = false ;
function toggleFullScreen（）{
if （element.requestFullScreen）{
if （fullScreen）{
element.CancelFullScreen（）;
fullScreen = false ;}
else {
element.requestFullScreen （）;
fullScreen = true ;
}
} else if （element.webkitRequestFullScreen）{
if （fullScreen）{
element.webkitCancelFullScreen（）;
fullScreen = false ;
}
else {
element.webkitRequestFullScreen（）;
fullScreen = true ;
}
} 其他 if （element.mozRequestFullScreen）{
if （fullScreen）{
element.mozCancelFullScreen（）;
fulLscreen = false ;
}
else {
element.mozRequestFullScreen（）;
fullScreen = true ;
}
}
}

欲了解更多信息：

https://developer.mozilla.org/en-US/docs/Web/API/ Document / mozCancelFullScreen [ ^ ]

hi,
i have div wich a apeare a google map and i create a link full screen when i click i have what i wont but when i close full screen the div stil have width and height i have give onclik this is o code plllz help me and sorry for my bad english

 <style>
        #map-canvas
        {
            height: 520px;
            width:1100px;
            border: 2px solid #326195;
            margin: 5px;

        }
</style>

<script>
        function changeWidth() {
            var e1 = document.getElementById("map-canvas");
            e1.style.width = "100%";
            e1.style.height = "100%";
        }
        //foction plein ecran
        var element, fullscreenbtn;
        function intializePlayer() {
            element = document.getElementById('map-canvas');
            fullscreenbtn = document.getElementById('fullscreenbtn');
            // Add event listeners
            fullscreenbtn.addEventListener('click', toggleFullScreen, false);
        }
        window.onload = intializePlayer;

        function toggleFullScreen() {
            if (element.requestFullScreen) {
                element.requestFullScreen();
            } else if (element.webkitRequestFullScreen) {
                element.webkitRequestFullScreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            }
        }
    </script>
  <form id="form1"  runat="server">


               <a href="#" id="fullscreenbtn" style="z-index: 10;">plein ecran</a>
           
        
        <div id="map-canvas">
         
        </div>
</form>

解决方案

The problem is that the API hooks for request and cancel full screen are different; it is not a toggle on it's own.

You need to make some minor modifications:

var fullScreen = false;
function toggleFullScreen() {
            if (element.requestFullScreen) {
                if(fullScreen){
                   element.CancelFullScreen();
                   fullScreen = false;}
                else{
                   element.requestFullScreen();
                   fullScreen = true;
                }
            } else if (element.webkitRequestFullScreen) {
                if(fullScreen){
                   element.webkitCancelFullScreen();
                   fullScreen = false;
                }
                else{
                   element.webkitRequestFullScreen();
                   fullScreen = true;
                }
            } else if (element.mozRequestFullScreen) {
                if(fullScreen){
                   element.mozCancelFullScreen();
                   fulLscreen = false;
                }
                else{
                   element.mozRequestFullScreen();
                   fullScreen = true; 
                }
            }
        }

For more information:
https://developer.mozilla.org/en-US/docs/Web/API/Document/mozCancelFullScreen[^]

这篇关于全屏白衣javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！