怎么将php某个页面变为全屏模式,HTML5如何实现网页的全屏切换

本篇教程探讨了HTML5如何实现网页的全屏切换，希望阅读本篇文章以后大家有所收获，帮助大家HTML5+CSS3从入门到精通 。

<

使用HTML5提供的JavaScript Api可以实现主流浏览器的全屏和退出全屏操作，封装成进入全屏和退出全屏的函数如下：

1     //进入全屏

2     function enterFullScreen() {

3         var de = document.documentElement;

4         if (de.requestFullscreen) {

5             de.requestFullscreen();

6         } else if (de.mozRequestFullScreen) {

7             de.mozRequestFullScreen();

8         } else if (de.webkitRequestFullScreen) {

9             de.webkitRequestFullScreen();

10         }

11     }

12     //退出全屏

13     function exitFullScreen() {

14         var de = document;

15         if (de.exitFullscreen) {

16             de.exitFullscreen();

17         } else if (de.mozCancelFullScreen) {

18             de.mozCancelFullScreen();

19         } else if (de.webkitCancelFullScreen) {

20             de.webkitCancelFullScreen();

21         }

22     }

然后将这两个函数绑定到超链接或者按钮事件上就可以实现浏览器的开启全屏和退出全屏操作

简单的测试页面代码如下：

1 html>

2 

3 

4     

5     

全屏切换

6     

7     //进入全屏

8     function enterFullScreen() {

9         var de = document.documentElement;

10         if (de.requestFullscreen) {

11             de.requestFullscreen();

12         } else if (de.mozRequestFullScreen) {

13             de.mozRequestFullScreen();

14         } else if (de.webkitRequestFullScreen) {

15             de.webkitRequestFullScreen();

16         }

17     }

18     //退出全屏

19     function exitFullScreen() {

20         var de = document;

21         if (de.exitFullscreen) {

22             de.exitFullscreen();

23         } else if (de.mozCancelFullScreen) {

24             de.mozCancelFullScreen();

25         } else if (de.webkitCancelFullScreen) {

26             de.webkitCancelFullScreen();

27         }

28     }

29     

30 

31 

32     

33         进入全屏

34          

35         退出全屏

36     

37 

38 

当点击进入全屏时，当前页面会进入全屏状态，并且浏览器会发出提示

当点击退出全屏时将会退出全屏状态

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道！