由于项目中用到了全屏化挫折功能，查看了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. P1062 数列

    题目描述 给定一个正整数k(3≤k≤15),把所有k的方幂及所有有限个互不相等的k的方幂之和构成一个递增的序列,例如,当k=3时,这个序列是: 1,3,4,9,10,12,13,… (该序列实际上就是 ...

  2. Spring && 实验IOC

    一.Spring作用 1.生态体系庞大,全能型选手![springmvc是其一个子模块,jdbcTemplate能直接操作数据库!]    2.将其他组件粘合在一起    3.IOC容器和AOP[As ...

  3. 聊5块钱P2V

    上一秒还在写代码,下一秒就跑机房干活. 这台机器产制石器时代,重启一次后再就启动不了了.这个故障处理的方式我们以后再谈. 今天聊聊啥是P2V,国人总喜欢弄些稀奇古怪的定义来证明自己技术很牛X,就跟当年 ...

  4. pandas 选择某几列

    转自:https://blog.csdn.net/aaa_aaa1sdf/article/details/77414387 col_n = ['名称','收盘价','日期'] a = pd.DataF ...

  5. IIS ARR设置HTTP跳转到HTTPS

    GUI Version - Select the website you wish to configure- In the “Features View” panel, double click U ...

  6. 摘:关于php调用.net的web service 踩过的坑

    文档地址:http://www.cnblogs.com/wyycc/p/6722701.html

  7. mysql执行语句汇总

    插入select的数据 INSERT INTO `test1`( order_id, goods_id, goods_name, goods_sn, product_id, goods_number, ...

  8. [转帖]4412开发板/4418开发板Android4.4.4实现ble功能

    本文转自迅为论坛:http://bbs.topeetboard.com ①.4418开发板实现ble功能方法: 在4418/android/device/nexell/drone2/device.mk ...

  9. cf536c——思路题

    题目 题目:Lunar New Year and Number Division 题目大意:给定一个数字序列,可以任意分组(可调整顺序),但每组至少两个,求每组内数字和的平方的最小值 思路 首先,易证 ...

  10. CRegKey

    1.简介 CRegKey提供了对系统注册表的操作方法,通过CRegKey类,可以方便的打开注册表的某个分支或子键(CRegKey::Open),可以方便的修改一个键的键值(CRegKey::SetVa ...