<!doctype html>

<html>

<head>

    <title>全屏显示</title>

    <meta charset="utf-8" />

    <style>

        div {

           width: 200px;

           height:200px;

           background:pink;

           margin:100px auto;

        }

        button {

            margin-left: 650px;

        }

        h1 {

            margin-left: 400px;

        }

    </style>

</head>

<body>

    <h1>js控制页面的全屏展示和退出全屏显示</h1>

    <div id="div1"></div>

    <button type="button" id="btn">全屏</button>

</body>

</html>

　　方法一：

<script type="text/javascript">

       window.onload =function(){

            document.getElementById("btn").onclick = function(){

              var elem =document.getElementById("div1");

              requestFullScreen(elem);

            }

            var requestFullScreen=function(element) {

               //某个元素有请求

             var requestMethod =element.requestFullScreen

             ||element.webkitRequestFullScreen //谷歌

             ||element.mozRequestFullScreen  //火狐

             ||element.msRequestFullScreen; //IE11

            if (requestMethod) {

             requestMethod.call(element);   //执行这个请求的方法

         } else if (typeof window.ActiveXObject !== "undefined") {  //window.ActiveXObject判断是否支持ActiveX控件

              //这里其实就是模拟了按下键盘的F11，使浏览器全屏

               var wscript = new ActiveXObject("WScript.Shell"); //创建ActiveX

             if (wscript !== null) {    //创建成功

                 wscript.SendKeys("{F11}");//触发f11

             }

         }

            }

    }

</script>

　　方法二：

<script>

 var btn = document.getElementById("btn"); 

btn.onclick = function() {

	var width =  window.screen.width;

	var height =   window.screen.height;

	var elem = document.getElementById("div1");

	requestFullScreen(elem);

}

function requestFullScreen(element) {

	if (element.requestFullscreen) {

		element.requestFullscreen();

	}

//FireFox

	else if (element.mozRequestFullScreen) {

		element.mozRequestFullScreen();

	}

//Chrome等

	else if (element.webkitRequestFullScreen) {

		element.webkitRequestFullScreen();

	}

//IE11

	else if (element.msRequestFullscreen) {

		element.msRequestFullscreen();

	}

};

</script>

　　方法三：

    <button type="button" id="btn" onclick="window.open(document.location, 'big', 'fullscreen=yes')">全屏</button>

　　

JavaScript实现全屏显示的更多相关文章

  1. 【温故而知新-Javascript】窗口效果 （全屏显示窗口、定时关闭窗口）

    1.全屏显示窗口 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  2. javascript full screen 全屏显示 页面元素

    javascript full screen 全屏显示 页面元素 要想让页面的某个元素全屏显示,就像在网页上看视频的时候,可以全屏观看一样,该怎么实现呢? 一种最简单的方式,就是动态改变你想要全屏显示 ...

  3. JavaScript全屏显示

    JavaScript全屏显示 需要引入的库 https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js https://cdn.bootcss.com/scr ...

  4. JavaScript：让浏览器全屏显示

    并不是所有人都会按F11让浏览器全屏显示~~~ 一.直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...

  5. js控制页面的全屏展示和退出全屏显示

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

  6. 全屏显示网页FULLSCREEN API

    第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...

  7. 在VC++6.0开发中实现全屏显示

    全屏显示是一些应用软件程序必不可少的功能.比如在用VC++编辑工程源文件或编辑对话框等资源时,选择菜单“View\Full Screen”,即可进入全屏显示状态,按“Esc”键后会退出全屏显示状态. ...

  8. Android 全屏显示的方法（不包含状态栏）

    我们都知道在Android中某些功能的实现往往有两种方法:一种是在xml文件中设置相应属性,另一种是用代码实现.同样Android实现全屏显示也可以通过这两种方法实现: 1.在AndroidManif ...

  9. Android 全屏显示

    Android全屏显示: @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInst ...

随机推荐

  1. Vue学习路线

    前言:学习Vue已经两个月了,目前前端的框架用得比较多的就是Bootstrap和Vue,而Bootstrap是开发人员用得较多,因为较为简单,上手也快.Vue是目前很火的数据驱动框,17年的时候就开始 ...

  2. [转] C#中的delegate 和 event

    转至:here 终于会用c#中的delegate(委托) 作者:qq826364410 引言 Delegate是Dotnet1.0的时候已经存在的特性了,但由于在实际工作中一直没有机会使用Delega ...

  3. [原][openstack-pike][controller node][issue-2][glance] Could not parse rfc1738 URL from string 'mysql+pymysql=http://glance:glance@controller/glance'

    问题点 在手动上传镜像的时候:出现错误 Could not parse rfc1738 URL from string 'mysql+pymysql=http://glance:glance@cont ...

  4. git clean(转载)

    git clean命令用来从你的工作目录中删除所有没有tracked过的文件. git clean经常和git reset --hard一起结合使用. 记住reset只影响被track过的文件, 所以 ...

  5. cf 1132 F

    区间dp.. 每次删一串相邻的一样的,问多少次删光. 感觉想的几乎是一样的怎么比赛时就过不了呢...一定是因为我挂机睡觉了 考虑l和r相等,l和l+1相等,r和r-1相等这三种情况就行了..然后就是裸 ...

  6. 写jquery插件(转载)

    如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...

  7. 小Q系列故事——屌丝的逆袭

    小Q系列故事——屌丝的逆袭 Problem Description 毕业于普通本科的小Q一直自称是资深屌丝,不仅学校不知名,甚至他自己在这个普通学校也是默默无闻——直到临近毕业的时候,班里5朵金花中的 ...

  8. C# word 图片大小

    通过Office自带的类库word文档中插入图片,图片大小的单位为磅 而文档中,图片的大小已经固定,为CM. 实际工作中,首先将图片插入到word中,根据目前的大小,计算转换为目标大小的比率,将长宽按 ...

  9. Jupyter notebook安装

    之前就装了jupyter notebook,但今天打开来发现是python2,并且似乎没法转换到python3??? so,再把python3的版本安装一下 打开CMD pip install jup ...

  10. Synctoy2.1使用定时任务0X1

    环境描述:公司需要在windows上面使用双向文件同步,目前发现SyncToy可以实现这个功能,但是在Windows 2012上面 ,添加定时任务的时候,执行状态总是0x1,定时任务配置确认多次,肯定 ...