<!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. L364 Should Your Resume Be One Page or Two?

    Should Your Resume Be One Page or Two? Conventional wisdom suggests that you should keep it short: A ...

  2. react native 打包上架

    https://www.jianshu.com/p/ce71b4a8a246 react-native bundle --entry-file index.ios.js --platform ios ...

  3. 第一次 刷 WiFi 模块esp8266 感谢创客阿正

    在正哥指导下 第一次 刷 WiFi 模块  少走了 不少弯路 套件里的 两块 机智云  ==== 我的电脑 需要单独供电 先 对应 接好 ic0要记得接gnd 等待上电时要断电重启 等  用助手 返回 ...

  4. SQL Server分页查询的万能存储过程

    CREATE proc [dbo].[p_paging]@tableName varchar(8000), --表名.视图名@indexCol varchar(50) = 'id', --标识列名(如 ...

  5. gulp的使用(二)之gulpfile.js文件的配置

    Gulpfile.js是什么文件: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她, ...

  6. 【原创】Arduino制作Badusb实践

    1.U盘构造      U盘由芯片控制器和闪存两部分组成. 芯片控制器负责与PC的通讯和识别,闪存用来做数据存储: 闪存中有一部分区域用来存放U盘的固件,它的作用类似于操作系统,控制软硬件交互:固件无 ...

  7. 周强 201771010141 《面向对象程序设计（Java）》第十一周学习总结

    实验十一   集合 实验时间 2018-11-8 1.实验目的与要求 (1) 掌握Vetor.Stack.Hashtable三个类的用途及常用API: Vector类实现了长度可变的数组. Stack ...

  8. 访问mysql出现Access denied for user 'root'@'的解决方法

    1.关闭mysql的服务 方法一:我的电脑右键-管理-服务和应用程序-服务,找到mysql,右键关闭 方法二:cmd进入命令提示符,service mysqld stop(这个是网上的方法,我试了一下 ...

  9. 将前台页面的数据传到后台的方法（不调用ajax，少量数据）

    1.前台画面:在页面中加入form和runat = "server"的方法并加入触发事件 <form method="post" runat=" ...

  10. tcpdump 交叉编译

    1下载源码:http://www.tcpdump.org/release/ libpcap-1.4.0.tar.gz tcpdump-4.4.0.tar.gz export PATH=/opt_gcc ...