JS实现全屏模式

作者: 你东哥呀 | 来源:发表于2017-07-24 14:41 被阅读326次

JS实现全屏模式
2018-10-19 全屏实现方法
JS实现简单网页全屏和退出全屏
Vue项目中点击按钮实现全屏模式
全屏写作者模式
JS 全屏
【全屏/非全屏】
js全屏的实现
JS 实现全屏效果
js全屏、iframe全屏、F11实现iframe全屏、ifra

今天在项目上要实现一个全屏功能，翻了翻百度，实现的方式确有不少，经楼主再三斟酌，决定采用以下JS方式，所以跟大家分享一下。话不多说，下面直接贴出代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>desktop</title>
</head>
<body id="content">
<b onclick="fullscreen()">全屏</b>
</body>

<script type="text/javascript" charset="utf-8">
    function fullscreen(){
        if (document.fullscreenElement ||
                document.mozFullScreenElement ||
                document.webkitFullscreenElement ||
                document.msFullscreenElement) {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
        } else {
            if (document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            } else if (document.documentElement.mozRequestFullScreen) {
                document.documentElement.mozRequestFullScreen();
            } else if (document.documentElement.webkitRequestFullscreen) {
                document.documentElement.webkitRequestFullscreen();
            } else if (document.documentElement.body.msRequestFullscreen) {
                document.documentElement.body.msRequestFullscreen();
            }
        }
    }
</script>
</html>

点击全屏进入全屏模式，再次点击全屏退出全屏模式。

这里延伸一下，iframe和frameset 怎么样实现全屏功能。

iframe

修改iframe的allowfullscreen属性等于true

如：<iframe name="qiye_doc" allowfullscreen="true"></iframe>

frameset

实现方式同上多两步操作，具体代码如下：

frameset结构如下：
<frameset id="top_frameset" rows="60px,*,0px" cols="*" frameborder="0">
    <frame id="frame_top" name="frame_top" scrolling="no" noresize src="/admin/_top" border="0"/>
    <frameset id="center_frameset" rows="*" cols="190px,*"  border="0" >
        <frame id="frame_left" name="frame_left" scrolling="no" noresize src="/admin/_left" />
        <frame id="frame_center" name="frame_center" scrolling="auto" noresize src="center.html"/>
    </frameset>
    <frame id="frame_bottom" name="frame_bottom" scrolling="no" noresize src=""/>
</frameset>

center.html代码如下：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>desktop</title>
</head>
<body id="content">
<b onclick="fullscreen()">全屏</b>
</body>

<script type="text/javascript" charset="utf-8">
    function fullscreen(){
         //1.修改最上级frameset的cols属性
         tObj = top.document.getElementById("top_frameset");
         tObj.cols = "0,*";
         //2.修改上级frameset的cols属性
         pObj = parent.document.getElementById("center_frameset");
         pObj.cols = "0,*";
         //3. 展开全屏，兼容Chrome等浏览器
         top.document.documentElement.webkitRequestFullScreen();
    }
</script>
</html>