HTML5全屏的例子

waylau發表於2016-05-10
HTML

http://labs.waylau.com/JsDemo/FullScreenDemo.html

FullScreenDemo : 線上演示檢視原始碼

HTML :

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
<!DOCTYPE html>
<html>
    <head>
        <title>一個全屏的例子|www.waylau.com</title>
        <meta charset="UTF-8"/>
        <meta name="description" content="一個全屏的例子|www.waylau.com,
        不同的瀏覽器方法不同，
        參考 http://robnyman.github.io/fullscreen
        ">
        <script type="text/javascript">
            /**
             *全屏,不同的瀏覽器方法不同
             */
            function fullScreen() {
 
                var docElm = document.documentElement;
                if (docElm.requestFullscreen) {
                    docElm.requestFullscreen();
                } else if (docElm.mozRequestFullScreen) {
                    docElm.mozRequestFullScreen();
                } else if (docElm.webkitRequestFullScreen) {
                    docElm.webkitRequestFullScreen();
                }
 
            }
 
            /**
             *退出全屏
             */
            function cancelFullscreen() {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }
            }
 
            /**
             *允許全屏輸入
             */
            function allowInput() {
                //不同的瀏覽器方法不同
                var docElm = document.documentElement;
                if (docElm.requestFullscreen) {
                    docElm.requestFullscreen();
                } else if (docElm.mozRequestFullScreen) {
                    docElm.mozRequestFullScreen();
                } else if (docElm.webkitRequestFullScreen) {
                    docElm.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
                }
 
            }
 
        </script>
    </head>
    <body>
        <h3>一個全屏的例子</h3>
        <p></p>
        <p>
            <button id="viewFullscreen" onclick="fullScreen()">
                全屏
            </button>
            <button id="cancelFullscreen" onclick="cancelFullscreen()">
                退出全屏
            </button>
            <button id="allowInput" onclick="allowInput()">
                允許全屏輸入（暫時只有Chrome支援）
            </button>
        </p>
        <p>
            <input type="text" placeholder="輸入內容">
        </p>
      
        <p>
            更多例項請訪問
            <a href="http://www.waylau.com" target="_blank">
                www.waylau.com
            </a>
        </p>
    </body>
</html>


相關文章