由于项目中用到了全屏化挫折功能，查看了API后写了一个简单的全屏化model

<!DOCTYPE html>

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=gb2312">

        <title></title>

        <style type="text/css">

            .div1{

                width: 1000px;height: 500px;

                border: solid 1px blue;

            }

            .test{

                width:100%;

                background: black;

                height:100%;

                min-height: 400px;

                border: solid 1px red;

            }

            div{

                color: #fff;

            }

        </style>

    </head>

    <body>

        <div class="div1" >

            <div id="div2"  class="test">

                <div id="div" class="" style="border:solid 1px #ffffff;width:100px;height:40px;">全屏</div>

                <div id="div3" class="" style="border:solid 1px #ffffff;width:100px;height:40px;">取消全屏</div>

            </div>

        </div>

        <script>

            (function () {

                var viewFullScreen = document.getElementById("div");

                if (viewFullScreen) {

                    viewFullScreen.addEventListener("click", function () {

                        var docElm = document.getElementById("div2");

                        if (docElm.requestFullscreen) {

                            docElm.requestFullscreen();

                        }

                        else if (docElm.msRequestFullscreen) {

                            docElm.msRequestFullscreen();

                        }

                        else if (docElm.mozRequestFullScreen) {

                            docElm.mozRequestFullScreen();

                        }

                        else if (docElm.webkitRequestFullScreen) {

                            docElm.webkitRequestFullScreen();

                        }else{

                            alert("当前浏览器不支持全屏化操作！");

                        }

                    }, false);

                }

                var cancelFullScreen = document.getElementById("div3");

                if (cancelFullScreen) {

                    cancelFullScreen.addEventListener("click", function () {

                        if (document.exitFullscreen) {

                            document.exitFullscreen();

                        }

                        else if (document.msExitFullscreen) {

                            document.msExitFullscreen();

                        }

                        else if (document.mozCancelFullScreen) {

                            document.mozCancelFullScreen();

                        }

                        else if (document.webkitCancelFullScreen) {

                            document.webkitCancelFullScreen();

                        } else{

                            alert("当前浏览器不支持全屏化操作！");

                        }

                    }, false);

                }

            })();

        </script>

    </body>

</html>

如果你想兼容一些低版本的ie浏览器，你可以替换我做提示的区域

alert("当前浏览器不支持全屏化操作！");
让你想全屏的部分，width:100%;height:100%;
然后再让他的父类节点的高度和宽度等于当前可用浏览器的最大宽度和高度就行啦。
在这里没有做具体的实现。
本人，不是很建议去兼容低ie浏览器，因为做前端的都知道，现在大部分html5和css3,ES6都不在积极的淘汰
低版本浏览器。微软也放弃了对低版本ie浏览器的维护。

HTML5 全屏化操作功能的更多相关文章

  1. 弹出iframe内嵌页面元素到父页面并全屏化

    (注册博客好久了,一直没舍得添砖加瓦,主要是每次想写点东西的时候,随便搜一搜发现都比我总结的都要好,甚感尴尬,但是总是要开始的,所以这就是我的第一篇博客,也绝不会是最后一篇,废话不多说,直接入正题) ...

  2. HTML5全屏操作API

    一.定义:HTML5规范允许自定义网页上的任一元素全屏显示,存在兼容问题 二.使用: ①基本: Node.RequestFullScreen()开启全屏显示 Node.CancelFullScreen ...

  3. html5下F11全屏化的几点注意

    1.实现全屏化 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestF ...

  4. HTML5 全屏特性

    全屏功能是浏览器很早就支持的一项功能了,可以让你页面中的video, image ,div 等等子元素实现全屏浏览,从而带来更好的视觉体验,来看看怎么使用吧.先来看看有哪些API和事件支持. API ...

  5. HTML5全屏浏览器兼容方案

    最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit  Firefox  IE Element.requestFullscreen() ...

  6. HTML5全屏背景视频与 CSS 和 JS（插件或库）

    译文原链接:http://codetheory.in/html5-fullscreen-background-video/ 前言: 当网页载入时,自动播放的全屏背景视频已经成为当前颇受欢迎的趋势. 就 ...

  7. WPF解决界面全屏化但不遮挡任务栏的问题

    原文:WPF解决界面全屏化但不遮挡任务栏的问题 学习C#有一段时间了,现在跟着做项目,碰到有个客户端界面总是全屏,对于客户来说没有任务栏很不习惯,所以做了些略微的修改   </pre>&l ...

  8. 基于HTML5全屏图文左右滑动切换特效

    基于HTML5全屏图文左右滑动切换特效.这是一款基于jQuery+HTML5实现的全屏图文切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <main> & ...

  9. 利用 chrome 做本地HTML5全屏应用

    现在HTML5已经很强大了,如何让网页看起来像本地应用呢?仅chrome浏览器就可以实现.(但当然只能使用HTML的功能,不能操作本地系统) 以百度为例: 使用chrome打开百度 https://w ...

随机推荐

  1. 堆排序原理及其js实现

    图文来源:https://www.cnblogs.com/chengxiao/p/6129630.html 堆排序是利用堆这种数据结构而设计的一种排序算法,堆排序是一种选择排序,它的最坏,最好,平均时 ...

  2. ESSENTIALS OF PROGRAMMING LANGUAGES (THIRD EDITION) ：编程语言的本质 —— （一）

    # Foreword> # 序 This book brings you face-to-face with the most fundamental idea in computer prog ...

  3. iOS programming UITableView and UITableViewController

    iOS programming  UITableView and UITableViewController A UITableView displays a single column of dat ...

  4. bootstrap 整理

    form-control   输入框,独占一行,占满. form-group  增加下边距 <label> 字体会加粗,不是独占一行 .col-xs-  超小屏 .col-sm- 平板 . ...

  5. mathAge.call(btn) 函数call 改变函数内 this #js

    mathAge.call(btn) 函数call 改变函数内 this

  6. ssd训练自己的数据集

    1.在ssd/caffe/data下创建VOC2007的目录,将ssd/caffe/data/VOC0712里的create_data.sh.create_list.sh和labelmap_voc.p ...

  7. numpy调试

    x1 = np.arange(9.0) 结果就是: array([ 0., 1., 2., 3., 4., 5., 6., 7., 8.]) 拿这个来初始化进行调试

  8. Vue完成TodoList案例

    写一个简单的TodoList的更实用(文末有彩蛋). 一,使用VUE-CLI脚手架快速搭建一个框架 利用VUE-CLI来自动生成我们项目的前端目录及文件,方法: npm install -g vue- ...

  9. laravel学习笔记2--表单

    一.Controller 1.Request 1.1.取值:input // 1.取值 echo $request->input('name'); // 2.取不到值时打印默认值 echo $r ...

  10. js 技巧 （八）JS代码判断集锦(之二)

    JS代码判断集锦(之二) <INPUT TYPE="button" value="登录"  tabindex="4"> < ...