由于项目中用到了全屏化挫折功能，查看了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. pycharm一些快捷键（不定时添加）

    ctrl + shift + -  缩减多级菜单 ctrl + shifit + + 展开多级菜单 ctrl + shift + F8  删除多个断点 两个项目比较 ---选中要比较的项目---右键找 ...

  2. Android与H5互调（通过实例来了解Hybrid App）

    前些日子,Android原生开发将被取缔的吵得火热,JavaScript是能做一个完全的APP,但只使用JavaScript做出来的APP也不会牛逼到哪里去.最好的是混合(Hybrid)开发,在需要的 ...

  3. 内存管理总结-autoreleasePool

    转自其他 序言 无论是在MRC时期还是ARC时期,做过开发的程序员都接触过autoreleasepool.尽管接触过但本人对它还不是很了解.本文只是将自己的理解说出来.在内存管理的文章中提到了OC的内 ...

  4. jQuery.ajax() 设置 Headers 中的 Accept 内容

    jQuery.ajax() 如何设置 Headers 中的 Accept 内容   其实很简单,首先如果是常见类型,则请直接设置 dataType 属性 $.ajax({ dataType: &quo ...

  5. 恩智浦Freescale Cortex-A9 迅为IMX6开发板平台初体验

    iTOP-i.MX6 开发板预装 Android4.4 系统,采用 9.7 寸(或者 7 寸或者 4.3 寸)IPS 屏 幕,至少 5 点以上触控,操作流畅,无论是高清视频.游戏等都会有上佳的表现,实 ...

  6. Oracle11g 审计介绍

    审计是记录数据库上方方面面操作.事件等信息,是数据安全管理的重要手段. 开启审计,虽然不同级别的审计会有不同,但是对数据库的性能是有影响的,并且占用存储空间. --1.创建审计数据专用表空间 crea ...

  7. 哈尔滨工程大学ACM预热赛 补题

    链接:https://ac.nowcoder.com/acm/contest/554/A来源:牛客网 小虎刚刚上了幼儿园,老师让他做一个家庭作业:首先画3个格子,第二行有2个格子,第三行有1个格子. ...

  8. 输入和输出（IO流）

    File类的常用方法: File对象的创建和部分方法使用: File file =new File("file\\我是文本.txt"); System.out.println(&q ...

  9. ORA-39126: Worker unexpected fatal error in KUPW$WORKER.PUT_DDLS

    末尾加上EXCLUDE=STATISTICS /home/opt/oracle/11g/bin/expdp user/password directory=backup2 network_link=d ...

  10. [Python3网络爬虫开发实战] 1.4.2-MongoDB安装

    MongoDB是由C++语言编写的非关系型数据库,是一个基于分布式文件存储的开源数据库系统,其内容存储形式类似JSON对象,它的字段值可以包含其他文档.数组及文档数组,非常灵活. MongoDB支持多 ...