<!DOCTYPE html>

 <html lang="en" id="div1">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

     <div style="background-color:red">

         <button onclick="openww()">新窗口</button>

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

         <button type="button" id="btn2">退出全屏</button>

     </div>

 </body>

 <script>

     function openww() {

         // window.showModalDialog("./tanchuang01.html","Window", "height=100, width=400, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300");

         window.open("http://baidu.com", "_blank", 'example02', 'channelmode');

         // window.open ("./tanchuang01.html","newwindow","height=600,width=800");

         // window.open("./tanchuang01.html", "_blank", "height=100, width=400, toolbar= no, menubar=no, scrollbars=no, resizable=no, location=no, status=no,top=100,left=300")

         // window.open('./tanchuang01.html', 'newwindow', 'height=100,width=400,top=0,left=0,toolbar=no,menubar=no,fullscreen=1,scrollbars=no, resizable=no,location=no, status=no,directories=no')

     }

     //全屏功能

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

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

         // elem.style.width = "100%";

         // elem.style.height = "100%";

         // elem.style.overflowY = "scroll";

         requestFullScreen(elem); // 某个页面元素

         //requestFullScreen(document.documentElement); // 整个网页

     };

     function requestFullScreen(element) {

         // 判断各种浏览器，找到正确的方法

         var requestMethod = element.requestFullScreen || //W3C

             element.webkitRequestFullScreen || //FireFox

             element.mozRequestFullScreen || //Chrome等

             element.msRequestFullscreen; //IE11

         if (requestMethod) {

             requestMethod.call(element);

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

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

             if (wscript !== null) {

                 wscript.SendKeys("{F11}");

             }

         }

     }

     //退出全屏 判断浏览器种类

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

         exitFull();

     };

     function exitFull() {

         // 判断各种浏览器，找到正确的方法

         var exitMethod = document.exitFullscreen || //W3C

             document.mozCancelFullScreen || //FireFox

             document.webkitExitFullscreen || //Chrome等

             document.msExitFullscreen; //IE11

         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}");

             }

         }

     }

 </script>

 </html>

js 实现操作浏览器或者元素的全屏与退出全屏功能的更多相关文章

  1. JS实现元素的全屏、退出全屏功能

     在实际开发中,我们很可能需要实现某一元素的全屏和退出全屏功能,如canvas.所幸的是,js提供了相关api用来处理这一问题,只需简单的调用requestFullScreen.exitFullScr ...

  2. js控制全屏及退出全屏

    js控制全屏及退出全屏,网上很多代码例子,我这里需求和标准的有点出入: 1.当用户点击某按钮,触发iframe下的页面全屏. 2.不允许用户退出全屏. 解决第一点,触发全屏可以按照网上的例子,代码如下 ...

  3. div的全屏与退出全屏

    div的全屏与退出全屏 作用:将div全屏与退出全屏,一般播放器使用较多. html按钮: <button onclick="showFull();"> 全屏 < ...

  4. android开发：全屏和退出全屏

    android开发:全屏和退出全屏 from://http://blog.csdn.net/dyllove98/article/details/8831933 2013-04-21 20:31 413 ...

  5. js之切换全屏和退出全屏实现

    应用场景:比如很多网页游戏全屏之类的,或者是网上看小说等. 核心代码: //控制全屏 function enterfullscreen() { //进入全屏 $("#fullscreen&q ...

  6. Android动态的全屏和退出全屏

    转自:http://chroya.iteye.com/blog/974031 让程序全屏的方法,大家都知道,那是静态的,程序运行之初就申明了.但是如果有这样的需求:要在程序运行的过程中,执行了某个操作 ...

  7. ng2 中的全屏与退出全屏

    1.进入全屏 launchFullscreen(element) { if(element.requestFullscreen) { element.requestFullscreen(); } el ...

  8. Cordova 设置全屏及退出全屏切换

    设置全屏在super.init();之前 最后才退出全屏. 以下为具体代码: package com.agile.ittm; import android.os.Bundle; import andr ...

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

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

随机推荐

  1. Android Touch事件相关源码【Android SourceCode 2.3.6】

    2018-05-31 17:23:46 Note: 这里的源码来自Android 2.3.6,这个版本的代码比较简单,适合理解Touch事件的传递原理.后续版本源码复杂了很多,但是原理都是类似的. 2 ...

  2. python 在内网windows环境下pip三方包

    我没用过Linux环境. 一般情况下,内网安装三方包,只需要在pypi找到对应python版本(2.7,3.6,...),系统位数(32位,64位)的whl包,cmd命令行cd进入相关目录,pip i ...

  3. *args和**kwargs的区别

    *args和**kwargs表示可变长度的参数. *args是元组类型: **kwargs是字典类型: 注意:arg.*args.**kwargs三个参数的位置必须是固定的,否则会报错.

  4. DevExpress v18.2新版亮点——DevExtreme篇（五）

    行业领先的.NET界面控件2018年第二次重大更新——DevExpress v18.2日前正式发布,本站将以连载的形式为大家介绍新版本新功能.本文将介绍了DevExtreme Complete Sub ...

  5. Tensorflow实战系列之五：

    打算写实例分割的实战,类似mask-rcnn. Tensorflow实战先写五个系列吧,后面新的技术再添加~~

  6. 第一次作业_ChenHong1998

    我的目标 学习到软件工程的实践过程 回想一下你初入大学时对软件工程专业的畅想 当初你是如何做出选择软件工程专业的决定的? 计算机是热门专业,软件工程专业好找工作 你认为过去两年中接触到的课程是否符合你 ...

  7. iphone html5页面禁止点击数字就打电话

    在html页面的head代码之间增加下面代码: <meta name="format-detection" content="telephone=no" ...

  8. ios中iframe页面出现白屏问题

    最近用ionic3开发的一个项目在ios中出现了白屏的问题 banner轮播图跳转网页 使用了iframe 但是却时不时的出现白屏现象 在android中一切正常 网上查资料发现 是因为ios不允许访 ...

  9. vim替换tab到4空格

    ~/.vimrc 中设置 # 设置tab宽度 set ts= #也可以用 set tabstop= #空格替换tab set expandtab 如果对于已保存的文件 :%retab! !用于修改所有 ...

  10. webservice和dubbo区别

    webservice  不需要搭建注册中心,是一个服务框架,主要内容有soap协议,uuid注册中心,wsdl文件. dubbo   需要搭建注册中心,可以是zookeeper,redis.它是一个分 ...