<!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. Django知识总结(一)

    壹 ● 有关http协议 一 ● 全称 超文本传输协议(HyperText Transfer Protocol) 二 ● 协议 双方遵循的规范 http协议是属于应用层的协议(还有ftp, smtp等 ...

  2. shell脚本的多线程

    shell脚本的多线程 #!/bin/bash ###这是个多线程脚本!!!! ..} do { .$i >/dev/null ];then echo "192.168.2.$i 存活 ...

  3. JQuery案例一：实现表格隔行换色

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. springboot-mybatis多数据源以及踩坑之旅

    首先,springboot项目结构如下 springboot配置文件内容如下 动态数据源的配置类如下(必须保证能被ComponentScan扫描到): 1 package com.letzgo.con ...

  5. react系列笔记：第三记-redux-saga

    github : https://github.com/redux-saga/redux-saga 文档:https://redux-saga.js.org/ redux-saga:  redux中间 ...

  6. List、Set和数组之间的转换（转载）

    本文转自 http://blog.sina.com.cn/s/blog_52fea7b60100s0hl.html 今天做项目中正好遇到该问题,就在网上查了下,这篇有些细节问题还是讲得挺好的. ★ 数 ...

  7. Database First/Code First

  8. 独家！DevExpress VCL Controls 2019发展路线图（No.1）

    [DevExpress VCL Controls下载] 根据调查结果和反馈,DevExpress官方团队最终确定了DevExpress VCL Controls 2019年的路线图. 关于调查结果的重 ...

  9. ubuntu的安装与vim(部分)文件的配置

    Ubuntu的安装与vim相关的配置 虚拟机环境的安装(先说说虚拟机的安装步骤把) 对于安装ubuntu来讲不是很难掌握,但是在Linux系统虚拟机下提供了很多便利的手段,而要配置一个顺手的虚拟机环境 ...

  10. 20175224 2018-2019-2 《Java程序设计》第八周学习总结

    教材学习内容总结 第十五章 泛型与集合框架 泛型 泛型:目的为建立具有类型安全的集合框架. 泛型类声明:class People<E> class 名称<泛型列表> 链表 定义 ...