<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>quanping</title>

</head>

<body>

    <div id="div" onclick="fullScreen()">全屏</div>

    <div onclick="exitFull()">退出全屏</div>

    <script type="text/javascript">

        function fullScreen(){

            var el = document.documentElement;

            var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;

                if(typeof rfs != "undefined" && rfs) {

                    rfs.call(el);

                };

              return;

        }

        function exitFull() {

         var exitMethod = document.exitFullscreen ||

         document.mozCancelFullScreen ||

         document.webkitExitFullscreen ||

         document.msExitFullscreen;

         if (exitMethod) {

          exitMethod.call(document);

         }

         else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer

          var wscript = new ActiveXObject("WScript.Shell");

          if (wscript !== null) {

           wscript.SendKeys("{F11}");

          }

         }

        }

        document.getElementById('div').click();

    </script>

</body>

</html>

本示例可实现点击全屏效果，但是这个API接口不能实现，页面加载完成就执行全屏的效果

js 实现浏览器全屏效果的更多相关文章

  1. HTML5 JS 实现浏览器全屏(F11的效果)

    项目中有需要使用JS来控制浏览器全屏的方法 DEMO地址: http://zhongxia245.github.io/demo/js2fullpanel.html function fullScree ...

  2. 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...

  3. 用html5 js实现浏览器全屏

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...

  4. [JavaScript] 用html5 js实现浏览器全屏

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的 效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以 让页面中的图片,视频等全屏目前只有g ...

  5. html5 js实现浏览器全屏

    全屏 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestFullsc ...

  6. js控制浏览器全屏

    HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏API,游戏呀,等都很有用.先看常见的API element.requestFullScree ...

  7. Jquery和JS实现浏览器全屏

    var fullscreen=function(){ elem=document.body; if(elem.webkitRequestFullScreen){ elem.webkitRequestF ...

  8. 原生js实现浏览器全屏和退出全屏

    全屏模式 //W3C if (docElm.requestFullscreen) { docElm.requestFullscreen(); } //FireFox else if (docElm.m ...

  9. 兼容IE浏览器的js浏览器全屏代码

    众所周知,IE是个奇葩的浏览器,但是由于用户量很大,开发者还是不得不为IE考虑一下,于是,各种浏览器相关的操作,都要多一个特别的判断——专门针对IE浏览器的判断,这里的全屏也不例外.看代码: func ...

随机推荐

  1. django 从零开始 2迁移模型数据到数据库中和admin初识

    和flask 一样 如果模型models 发生改动,则需要进行一个迁移数据库,但是我还没有想讲到那么深入,现在模型是django自带的一些sessiong,damin之类的模型 所以如果你想进去adm ...

  2. vue+django+webpack搭建

    一.前言 最近接手了一个项目,后端是django,前端是django自带的模板,用的是jinja2,写了一段时间发现用起来特别不顺手,于是想在保持现有的模板基础上,引入vue框架,这样同事可以继续用自 ...

  3. call、apply和bind的学习

    相似之处:1.都是用来改变函数的this对象的指向的.2.第一个参数都是this要指向的对象.3.都可以利用后续参数传参. var xw = {  name : "小王",gend ...

  4. Python基础编程题100列目录

    实例001:数字组合 实例002:"个税计算" 实例003:完全平方数 实例004:这天第几天 实例005:三数排序 实例006:斐波那契数列 实例007:copy 实例008:九 ...

  5. MySQL基础篇(06)：事务管理，锁机制案例详解

    本文源码:GitHub·点这里 || GitEE·点这里 一.锁概念简介 1.基础描述 锁机制核心功能是用来协调多个会话中多线程并发访问相同资源时,资源的占用问题.锁机制是一个非常大的模块,贯彻MyS ...

  6. NIO中的ZeroCopy

    前文提到网络IO可以使用多路复用技术,而文件IO无法使用多路复用,但是文件IO可以通过减少底层数据拷贝的次数来提升性能,而这个减少底层数据拷贝次数的技术,就叫做ZeroCopy. 操作系统层面的Zer ...

  7. java-打印流（新手）

    实例:1.直接输出到文件里面. import java.io.*; //打印流->保持数据原样性并且打印.(各种数据类型.) public class Dyl { public static v ...

  8. JAVA 转换 树结构数据

    JAVA 转换 树结构数据 第一步:引入fastjson <dependency> <groupId>com.alibaba</groupId> <artif ...

  9. SpringMVC框架——集成RESTful架构

    REST:Representational State Transfer 资源表现层状态转换 Resources 资源 Representation 资源表现层 State Transfer 状态转换 ...

  10. I2C的基本概念和协议

    概念   I2C总线是由Philips公司开发的一种简单.双向二线制同步串行总线.它只需要两根线即可在连接于总线上的器件之间传送信息.  主器件用于启动总线传送数据,并产生时钟以开放传送的器件,此时任 ...