HTML5实现网页的全屏切换

abcd232110个月前前端开发487

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

//进入全屏

    function enterFullScreen() {

        var de = document.documentElement;

        if (de.requestFullscreen) {

            de.requestFullscreen();

        } else if (de.mozRequestFullScreen) {

            de.mozRequestFullScreen();

        } else if (de.webkitRequestFullScreen) {

            de.webkitRequestFullScreen();

        }

    }

    //退出全屏

    function exitFullScreen() {

        var de = document;

        if (de.exitFullscreen) {

            de.exitFullscreen();

        } else if (de.mozCancelFullScreen) {

            de.mozCancelFullScreen();

        } else if (de.webkitCancelFullScreen) {

            de.webkitCancelFullScreen();

        }

    }

然后将这两个函数绑定到超链接或者按钮事件上就可以实现浏览器的开启全屏和退出全屏操作
简单的测试页面代码如下:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>全屏切换</title>

    <script type="text/javascript">

    //进入全屏

    function enterFullScreen() {

        var de = document.documentElement;

        if (de.requestFullscreen) {

            de.requestFullscreen();

        } else if (de.mozRequestFullScreen) {

            de.mozRequestFullScreen();

        } else if (de.webkitRequestFullScreen) {

            de.webkitRequestFullScreen();

        }

    }

    //退出全屏

    function exitFullScreen() {

        var de = document;

        if (de.exitFullscreen) {

            de.exitFullscreen();

        } else if (de.mozCancelFullScreen) {

            de.mozCancelFullScreen();

        } else if (de.webkitCancelFullScreen) {

            de.webkitCancelFullScreen();

        }

    }

    </script>

</head>

<body>

    <div>

        <a href="javascript:;" onclick="enterFullScreen()">进入全屏</a>

        &nbsp;

        <a href="javascript:;" onclick="exitFullScreen()">退出全屏</a>

    </div>

</body>

</html>

 

相关文章

公共jquery库无法连接,则实行本地库

如果没有加载公共库jquery,则加载本地jquery。jQuery加载后,会在window对象上创建jQuery属性。所以根据window.jQuery来判断是否加载过jQuery。用的是短路求值。...

取消chrome浏览器下input和textarea的默认样式

chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动textarea还会使页面布局错乱,所...

滚屏加载–无刷新动态加载数据技术的应用

滚屏加载技术,就是使用Javascript监视滚动条的位置,每次当滚动条到达浏览器窗口底部时,触发一个Ajax请求后 台PHP程序,返回相应的数据,并将返回的数据追加到页面底部,从而实现了动态加载,其...

用JS获取地址栏参数的方法

采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!)function GetQueryString(name) {      v...

滚动条触动css动画效果——scrollreveal.js

滚动条触动css动画效果——scrollreveal.js

和 WOW.js 一样,scrollReveal.js 也是一款页面滚动显示动画的 JavaScript,能让页面更加有趣,更吸引用户眼球。不同的是 WOW.js 的动画只播放一次,而 scrollR...

JQ获取浏览器宽度,根据不同宽度给div赋值

var winWidth = $(window).width();     var winHeight =$...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。