<!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. Java线程面试题Top50

    不管你是新程序员还是老手,你一定在面试中遇到过有关线程的问题.Java 语言一个重要的特点就是内置了对并发的支持,让 Java 大受企业和程序员的欢迎.大多数待遇丰厚的 Java 开发职位都要求开发者 ...

  2. Redis安装部署教程

    1)下载 redis-3.2.9.tar.gz 2)用ssh工具连接目录主机,在命令窗口输入:mkdir -p /opt/redis创建redis文件夹 3)通过WinSCP工具将redis-3.2. ...

  3. Android : 高通平台Camera调试之SetpropKey/camxoverridesettings.txt

    高通相关网址:Createpoint: https://createpoint.qti.qualcomm.com(可下载文档,Release Note等)Chipcode: https://chipc ...

  4. RAID阵列盘有一块状态变为外来处理方法

    感谢: https://blog.csdn.net/cmzsteven/article/details/63680933

  5. 基于centos6.5安装部署mongdb3.6

    注意:不同的版本的centos,mongdb安装方式不同,请注意版本号!! 基于centos6.5安装部署mongdb3.6 方式有多种,本文介绍使用wget命令来下载获取mongdb,具体命令如下 ...

  6. 初学者如何迅速学习web前端开发

    首先告诉你的是,零基础学习开始学习web前端肯定难,web前端的专业程度本身就不简单,学习这事本来就是一件非常煎熬的事情,人都不愿意学习,可是没办法,为了生存掌握一个技能,你必须学,如果你认真的对待, ...

  7. FBV和CBV装饰器

    FBV装饰器: def cook(request): err_msg="" if request.method == "GET": return render( ...

  8. c/c++ include 头文件的方式

    在编写c/c++代码时,#include 头文件有两种方式:一个是#include “文件名”,一个是#include <文件名>.区别在于: 前者在程序编译时系统首先在源程序所在的目录( ...

  9. vi编辑器之删除操作

    参见 1.vi列删除 方法一: ctrl+v进入列编辑模式: 将光标定位子想要删除的起始列: 移动光标至结束列(直接通过移动光标选中,对列不对齐时,可能比较长的行,无法全部选中,尤其是需要一直删除到行 ...

  10. 集群web-ui

    一旦Hadoop集群启动并运行,可以通过web-ui进行集群查看,如下所述: 1.hdfs的集群端口号默认50070 NameNode  http://localhost1:50070(默认端口号po ...