功能0 -- fullscreen

時間 2019-12-11

標籤功能 fullscreen 简体版

原文原文鏈接

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>fullscreen</title>
</head>
<body>
    <div id="content" style="width:500px;height:500px;">
      這是被全屏的元素
      <button id='btn'>全屏</button>
      <button id="closeBtn">退出全屏</button>  
    </div> 

    <script type="text/javascript">
        let content = document.getElementById('content');   
        let openBtn = document.getElementById('btn');  
        let closeBtn = document.getElementById('closeBtn');  
        openBtn.onclick = function(){  
	    fullScreen(content);  
        }
        closeBtn.onclick = function(){  
            closeFullScreen();  
        }
	// 開啓全屏
	function fullScreen(elem){
	　　let docElm = document.documentElement;
	　　if (docElm.requestFullscreen) {
	　　　　// console.log(1)
	      docElm.requestFullscreen();  
	　　} else if (docElm.mozRequestFullScreen) {
	　　　　// console.log(2)
	      docElm.mozRequestFullScreen();  								//  firefox
	　　} else if (docElm.webkitRequestFullScreen) {
	　　　　// console.log('webkit內核')								//  chrome、360、QQ、遨遊
	    　　docElm.webkitRequestFullScreen();  
	　　} else if (docElm.msRequestFullscreen) {
	　　　　　　// console.log(4)
	　　　　　　elem.msRequestFullscreen();								//  IE
	　　}
　　　　　}
	// 關閉全屏
	function closeFullScreen(){
	　　if (document.exitFullscreen) {  
	　　　　document.exitFullscreen();  
	　　}else if (document.mozCancelFullScreen) {  
	　　　　document.mozCancelFullScreen();  
	　　}else if (document.webkitCancelFullScreen) {  
	　　　　document.webkitCancelFullScreen();  
	　　}else if (document.msExitFullscreen) {
	　　　　document.msExitFullscreen();
	　　}
　　　　　}
　　</script>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。