由于项目中用到了全屏化挫折功能，查看了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. ES3之bind方法的实现模拟

    扩展Function原型方法,此处用myBind来模拟bind实现 Function.prototype.myBind = function(o /*,args*/){       //闭包无法获取t ...

  2. 001原始编译全志r6平台tinav3.0.2系统

    001原始编译全志r6平台tinav3.0.2系统 2018/6/8 11:32 版本:V1.0 开发板:R6 SDK:tina v3.0.2 1.01原始编译全志r16平台tinav3.0系统: r ...

  3. ScrollView属性

    1.文本内容过长,一个屏幕显示不下,这时候就把显示文本的 TextView包裹在ScrollView里面,可以做到滚动下滑查看的功能 2.隐藏滚动条 标签属性设置android:scrollbars= ...

  4. git --删除文件、重命名

    修改最后一次提交 git commit --amend -m “” 删除文件:. git rm <需要删除的文件> 只是删除当前工作目录和暂存区的文件,也就是取消跟踪.在下次提交时不纳入版 ...

  5. Java集合框架源码（四）——Vector

    第1部分 Vector介绍 Vector简介 Vector 是矢量队列,它是JDK1.0版本添加的类.继承于AbstractList,实现了List, RandomAccess, Cloneable这 ...

  6. （转）淘淘商城系列——引用dubbo服务

    http://blog.csdn.net/yerenyuan_pku/article/details/72758663 上文我们一起学习了如何发布一个dubbo服务,本文我就来教大家如何在web工程中 ...

  7. crontab 每月最后一天执行命令

    没有什么是解决不了的事情,如果有,只是我们的知识不够精通,学得不扎实 需求:有一个程序,需要在每个月的最后一天执行 例如:每个月的最后一天早上8:00 打印 dede 到  /tmp/test.txt ...

  8. 为什么 [\000-\177]匹配任意7bit ascii码 ？

    如题 41     print \000;     42     print "\n";     43     print \177; 输出: SCALAR(0x3fce0)SCA ...

  9. Android图像处理之BitMap(2)

    Bitmap 相关 1. Bitmap比较特别 因为其不可创建 而只能借助于BitmapFactory 而根据图像来源又可分以下几种情况: * png图片 如:R.drawable.tianjin J ...

  10. iphone X 的适配

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...