由于项目中用到了全屏化挫折功能，查看了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. dotnet cors 跨域问题

    研究了一整子的.net core框架,感觉挺好用的,可以用在实际项目中,前端avalon框架也在研究: 问题:跨域,相比原来的跨域解决方案,还是有不小的变化的,原来的.net api 只需要在WebA ...

  2. poj3685 Matrix

    思路: 二分套二分. 矩阵在每一列上是严格递增的,可以利用这一点进行二分. 实现: #include <cstdio> #include <cmath> #include &l ...

  3. PHP（二）常用函数

    数学函数 数组函数 字符串函数

  4. 怪物猎人OL简单测评与碎碎念

    请移步我的个人网站查看: www.wuduojia.cn

  5. SQL——时间戳

    mysql 低版本,date.datetime.timestamp 无法精确到毫秒 可以舍弃时间类型字段,用 bigint 来代替,如果用字符串类型代替,还是比较担心排序的时候只是根据第一个字母进行排 ...

  6. 迅速搞懂JavaScript正则表达式之方法

    咱们来看看JavaScript中都有哪些操作正则的方法. RegExp RegExp 是正则表达式的构造函数. 使用构造函数创建正则表达式有多种写法: new RegExp('abc');// /ab ...

  7. Java基础(十一)--Serializable和Externalizable接口实现序列化

    序列化在日常开发中经常用到,特别是涉及到网络传输的时候,例如调用第三方接口,通过一个约定好的实体进行传输,这时你必须实现序列 化,这些都是大家都了解的内容,所以文章也会讲一下序列化的高级内容. 序列化 ...

  8. Q币直充-迅银渠道商(php 面向对象类)

    Q币直充的一个类实现 1 <?php /** * DEC : 迅银Q币直充 * User: David Wang * Time: 2018/5/24 下午1:09 */ namespace go ...

  9. 并发-5CAS与AQS

    juc: java.util.concurrent 锁: 悲观锁:写的比较多,对数据的增删改,读(查)少.Lock 乐观锁:反之,读多写少.版本 并发编程之 CAS 的原理 什么是CAS CAS (c ...

  10. SQL Server中 sysobjects、sysolumns、systypes

    1.sysobjects    系统对象表. 保存当前数据库的对象,如约束.默认值.日志.规则.存储过程等 在大多数情况下,对你最有用的两个列是Sysobjects.name和Sysobjects.x ...