Javascript Fullscreen mode เปิด Fullscreen ในบราวเซอร์
23 ก.ค. 2020 , 4,699 Views , หมวดหมู่ jQuery,JavaScript,Ajax WebDesign ทุกหมวดหมู่ โค๊ดดิ้ง , ป้ายกำกับ:Fullscreen, javascript
ตัวอย่างตามโค๊ดด้านล่างเลยครับ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> </head> <style> #content_fullscreen { background-color: white; } /* applied for all elements that go to fullscreen */ :fullscreen { /* CSS properties */ } /* applied for specific element */ #content_fullscreen:fullscreen { /* CSS properties */ padding: 20px; } /* Safari */ :-webkit-full-screen { } /* Safari */ #container:-webkit-full-screen { } </style> <body> <h2>ทดสอบ Fullscreen ด้วย javascript</h2> <div id="content_fullscreen"> <button id="openfullscreen" onclick="openFullscreen();">Fullscreen Mode</button> <button id="exitfullscreen" onclick="closeFullscreen();" style="display:none;">Exit Fullscreen Mode</button> <hr> ส่วนนี้คือส่วนที่แสดงใน Fullscreen </div> </body> </html> <script> //element ที่จะให้แสดง fullscreen var elem = document.getElementById("content_fullscreen"); function openFullscreen() { if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { /* Firefox */ elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE/Edge */ elem.msRequestFullscreen(); } } /* Close fullscreen */ function closeFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { /* Firefox */ document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */ document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { /* IE/Edge */ document.msExitFullscreen(); } } document.addEventListener('fullscreenchange', function() { var full_screen_element = document.fullscreenElement; if(full_screen_element !== null){ //$("#openfullscreen").hide(); //$("#exitfullscreen").show(); document.getElementById("openfullscreen").style.display = "none"; document.getElementById("exitfullscreen").style.display = ""; //console.log('Page has entered fullscreen mode'); }else{ //$("#openfullscreen").show(); //$("#exitfullscreen").hide(); document.getElementById("openfullscreen").style.display = ""; document.getElementById("exitfullscreen").style.display = "none"; //console.log('Page has exited fullscreen mode'); } }); </script> |
ดูเพิ่มเติม
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_fullscreen
https://usefulangle.com/post/12/javascript-going-fullscreen-is-rare
ป้ายกำกับ:Fullscreen, javascript
