当用户以全屏模式查看元素时,发生全屏更改事件。element.requestFullscreen()方法用于查看全屏模式,而element.exitFullscreen()方法用于取消全屏模式。
用法:
- 在HTML中:
<element onfullscreenchange="myScript">
- 在JavaScript中:
object.onfullscreenchange = function(){myScript};
- 在JavaScript中,使用addEventListener()方法:
object.addEventListener("fullscreenchange", myScript);
以下示例说明了HTML DOM中的fullscreenchange事件:
- 范例1:本示例说明HTML DOM fullscreenchange事件。
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body onfullscreenchange="function()"> <center> <h1 id="geeks" style="color:green;"> GeeksforGeeks</h1> <h3>Fullscreen with JavaScript</h3> <p>Click on the button to open this page in fullscreen mode.</p> <button onclick="openFullscreen();"> Fullscreen Mode</button> <button onclick="closeFullscreen();"> Close Fullscreen or pres "Esc"</button> <script> var gfg = document.documentElement; function openFullscreen() { if (gfg.requestFullscreen) { gfg.requestFullscreen(); } } function closeFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } } </script> </body> </html>
输出:
- 范例2:本示例将JavaScript用于fullscreenchange事件。
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <center> <h1 id="geeks" style="color:green;"> GeeksforGeeks</h1> <h3>Fullscreen with JavaScript</h3> <p>Click on the button to open this page in fullscreen mode.</p> <button onclick="openFullscreen();"> Fullscreen Mode</button> <button onclick="closeFullscreen();"> Close Fullscreen or pres "Esc"</button> <script> var gfg = document.documentElement; function openFullscreen() { if (gfg.requestFullscreen) { gfg.requestFullscreen(); } } function closeFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } } var output = document.getElementById("geeks"); document.onfullscreenchange (function() { }); </script> </body> </html>
输出:
- 范例3:此示例对全屏更改事件使用addEventListener()方法。
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <center> <h1 id="geeks" style="color:green;"> GeeksforGeeks</h1> <h3>Fullscreen with JavaScript</h3> <p>Click on the button to open this page in fullscreen mode.</p> <button onclick="openFullscreen();"> Fullscreen Mode</button> <button onclick="closeFullscreen();"> Close Fullscreen or pres "Esc"</button> <script> var gfg = document.documentElement; function openFullscreen() { if (gfg.requestFullscreen) { gfg.requestFullscreen(); } } function closeFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } } var output = document.getElementById("geeks"); document.addEventListener("fullscreenchange", function() { output.innerHTML = "A computer science portal for geeks"; }); </script> </body> </html>
输出:
- 支持的浏览器:下面列出了HTML DOM fullscreenchange事件支持的浏览器:
- 谷歌浏览器45.0
- Internet Explorer 11.0
- Firefox 47.0
- 苹果Safari 5.1
- Opera 15.0
相关用法
- HTML oninvalid事件用法及代码示例
- HTML onfocus事件用法及代码示例
- HTML onratechange事件用法及代码示例
- HTML onplay事件用法及代码示例
- HTML onplaying事件用法及代码示例
- HTML onprogress事件用法及代码示例
- HTML onscroll事件用法及代码示例
- HTML ondragenter事件用法及代码示例
- HTML ondragend事件用法及代码示例
- HTML ondblclick事件用法及代码示例
- HTML oncut事件用法及代码示例
- HTML ondragstart事件用法及代码示例
- HTML onreset事件用法及代码示例
- HTML ondrop事件用法及代码示例
- HTML onresize事件用法及代码示例
注:本文由纯净天空筛选整理自Vijay Sirra大神的英文原创作品 HTML | DOM fullscreenchange Event。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。