精华内容
下载资源
问答
  • 以下demo是页面进行全屏和正常屏幕的,你也可以用元素来进行全屏,当然 只有包含在顶层文档(top-level document)内部的标准HTML元素、元素和元素,以及拥有allowfullscreen属性的iframe的内部元素可以进入全屏...

    Element.requestFullscreen() 方法用于发出异步请求使元素进入全屏模式。

    以下demo是页面进行全屏和正常屏幕的,你也可以用元素来进行全屏,当然

    只有包含在顶层文档(top-level document)内部的标准HTML元素、<svg>元素和<math>元素,以及拥有allowfullscreen属性的iframe的内部元素可以进入全屏模式。这意味着在frame内部的元素,以及object的内部元素不能进入全屏模式。这段是从https://developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullScreen抄过来的。


    <!doctype html>
    <html>
        <head>
        	<meta charset="UTF-8"/>
            <title>全屏不全屏</title>
        </head>
        <body>
              <input id="fullScreen" type="button" value="全屏"/>
    			<input id="fullScreenNormal" type="button" value="正常"/>
         </body>
    </html>
    <script>
           document.getElementById("fullScreen").οnclick=function(){
           		if(document.documentElement.RequestFullScreen){
           			document.documentElement.RequestFullScreen();
           		}
           		//兼容火狐
           		console.log(document.documentElement.mozRequestFullScreen)
           		if(document.documentElement.mozRequestFullScreen){
           			document.documentElement.mozRequestFullScreen();
           		}
           		//兼容谷歌等可以webkitRequestFullScreen也可以webkitRequestFullscreen
           		if(document.documentElement.webkitRequestFullScreen){
           			document.documentElement.webkitRequestFullScreen();
           		}
           		//兼容IE,只能写msRequestFullscreen
           		if(document.documentElement.msRequestFullscreen){
           			document.documentElement.msRequestFullscreen();
           		}
           }
           document.getElementById("fullScreenNormal").οnclick=function(){
           		if(document.exitFullScreen){
           			document.exitFullscreen()
           		}
    //     		//兼容火狐
    //     		console.log(document.mozExitFullScreen)
           		if(document.mozCancelFullScreen){
           			document.mozCancelFullScreen()
           		}
    //     		//兼容谷歌等
           		if(document.webkitExitFullscreen){
           			document.webkitExitFullscreen()
           		}
    //     		//兼容IE
           		if(document.msExitFullscreen){
           			document.msExitFullscreen()
           		}
           }
    </script>


    展开全文
  • ...安装完成后,会在ubuntu中看到这样一个压缩文件; ...这里也可以cd到这个文件夹,然后用tar命令进行解压; ...解压后进入到该文件夹中,可以看到有这样一个文件: ...完成后,重启即可全屏;效果:

    在这里插入图片描述
    首先点击虚拟机——>安装vmware tools;安装完成后,会在ubuntu中看到这样一个压缩文件;
    在这里插入图片描述
    将该压缩文件复制到你认为可以安装的地方,然后点击右键——>提取到此处;这里也可以cd到这个文件夹,然后用tar命令进行解压;
    在这里插入图片描述
    解压后进入到该文件夹中,可以看到有这样一个文件:
    在这里插入图片描述
    在终端通过cd命令进入到该文件夹中,执行:

    sudo ./vmware-install.pl
    

    完成后,重启即可全屏;效果:
    在这里插入图片描述

    展开全文
  • js实现页面全屏

    千次阅读 2018-12-03 15:39:18
    进入全屏 if (!document.fullscreenElement &amp;&amp; !document.mozFullScreenElement &amp;&amp; !document.webkitFullscreenElement &amp;&amp; !document.msFullscreenElement) { // ...

    进入全屏

    if (!document.fullscreenElement &&
        !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {  // current working methods
        if (document.documentElement.requestFullscreen) {
            document.documentElement.requestFullscreen();
        } else if (document.documentElement.msRequestFullscreen) {
            document.documentElement.msRequestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
    }
    

    退出全屏

    if (document.exitFullscreen) {
        document.exitFullscreen();
    } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
    }
    

    全屏切换方法

            function toggleFullScreen() {
                // alternative standard method
                if (!document.fullscreenElement &&
                    !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) {  // current working methods
                    if (document.documentElement.requestFullscreen) {
                        document.documentElement.requestFullscreen();
                    } else if (document.documentElement.msRequestFullscreen) {
                        document.documentElement.msRequestFullscreen();
                    } else if (document.documentElement.mozRequestFullScreen) {
                        document.documentElement.mozRequestFullScreen();
                    } else if (document.documentElement.webkitRequestFullscreen) {
                        document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
                    }
                } else {
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.webkitExitFullscreen) {
                        document.webkitExitFullscreen();
                    }
                }
            }
    

    检测当前的全屏状态

    window.addEventListener("resize", function () {
        //根据当前的状态显示图标
        if(!document.fullscreenElement &&
            !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement){
           //退出全屏状态。。。
        }
        else{
            //进入全屏状态。。。
        }
    });
    

    局部dom对象全屏

    调用此方法,并将dom对象传入即可

            function launchFullScreen(element) {
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.webkitRequestFullscreen) {
                    element.webkitRequestFullscreen();
                } else if (element.msRequestFullscreen) {
                    element.msRequestFullscreen();
                }
            }
    
    展开全文
  • js 页面全屏,退出全屏, fullScreen

    千次阅读 2017-09-11 10:53:32
    js 页面全屏,退出全屏, fullScreen

    项目有个需求,当点击打开一个新页面的时候需要该页面全屏(类似F11键功能),查找之后发现没办法直接用js来触发全屏,只能通过用户鼠标、键盘等事件中才能触发,即“对于一些非用户事件,比如onload、timeout等之类的事件中调用requestFullScreen是无法生效的,出于安全性考虑必须在用户事件中调用,比如鼠标、键盘等操作”。
    文档全屏的方法本身是作用在body或documentElement上的,也可以作用的元素本身上,其他元素如CANVAS、VIDEO,之类的也可以发起全屏请求。

    作用在document的全屏代码

    function fullScreen(){
      var docElm = document.documentElement; 
      if (docElm.requestFullscreen) {  
          docElm.requestFullscreen();  
      } else if (docElm.mozRequestFullScreen) {
          docElm.mozRequestFullScreen();  
      } else if (docElm.webkitRequestFullScreen) {
          docElm.webkitRequestFullScreen();  
      } else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
      }
    }

    作用在document的关闭全屏代码

     function closeFullScreen(){
       if (document.exitFullscreen) {  
         document.exitFullscreen();  
       }else if (document.mozCancelFullScreen) {  
         document.mozCancelFullScreen();  
       }else if (document.webkitCancelFullScreen) {  
         document.webkitCancelFullScreen();  
       }else if (document.msExitFullscreen) {
          document.msExitFullscreen();
       }
     }

    基于元素全屏的代码

    <!--html code-->
        <div id="content" style="width:500px;height:500px;background:red;">
            这是被全屏的元素
            <button id='btn'>全屏</button>
            <button id="closeBtn">退出全屏</button>  
        </div> 
    //js code
    function fullScreen(el) {  
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,  
            wscript;  
        if(typeof rfs != "undefined" && rfs) {  
            rfs.call(el);  
            return;  
        }    
        if(typeof window.ActiveXObject != "undefined") {  
            wscript = new ActiveXObject("WScript.Shell");  
            if(wscript) {  
                wscript.SendKeys("{F11}");  
            }  
        }  
    }    
    function exitFullScreen(el) {  
        var el= document,  
            cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,  
            wscript;     
        if (typeof cfs != "undefined" && cfs) {  
          cfs.call(el);  
          return;  
        }     
        if (typeof window.ActiveXObject != "undefined") {  
            wscript = new ActiveXObject("WScript.Shell");  
            if (wscript != null) {  
                wscript.SendKeys("{F11}");  
            }  
      }  
    } 
    
    var btn = document.getElementById('btn');  
    var content = document.getElementById('content');   //被全屏显示的元素
    btn.onclick = function(){  
        fullScreen(content);  
    }  
    var closeBtn = document.getElementById('closeBtn');  
    closeBtn.onclick = function(){  
        exitFullScreen();  
    } 
    展开全文
  • js控制页面全屏

    千次阅读 2019-05-06 16:38:12
    function fullScreenFun() { var iFullscreen = false; //当前是否全屏状态 var fullscreenEnabled = document.fullscreenEnabled || document.mozFullScreenEnabled || document.webkitFullscreenEna...
  • vue页面全屏及跳转新的页面

    千次阅读 2020-05-06 10:57:04
    vue页面全屏显示及跳转新的页面 <template> <div class="homebox" style="background-color: darkcyan"> <span>hello</span> </div> </template> <script> export ...
  • vue子菜单页面全屏展示及退出全屏 <template> <div id="day" tabindex="0" @keydown.esc="escFullScrean"></div> </template> methods: { screen(){ document.getElementsByTagName...
  • js设置页面全屏

    千次阅读 2019-05-21 09:43:00
    <!-- 全屏按钮 -->...img id="alarm-fullscreen-toggler" src="/public/index/images/open.png" alt="全屏按钮" /> js代码 // 设置全屏 $('#alarm-fullscreen-toggler').on('click', functio...
  • 前端实现页面全屏效果 代码写的比较烂,大哥们别骂我 //全屏按钮 function fullScreen() { var width = window.screen.width; var height = window.screen.height; //vue获取元素并给元素赋值 var video = this...
  • 是因为全屏只是个产品逻辑,把地图外的其他div隐藏,然后把地图的width设置为页面最大像素就可以了。 是js和css的技术,和API无关 先定义一个按钮 获取按钮元素 ,写全屏逻辑代码 //全屏 var btn = document....
  • VUE 全屏页面

    千次阅读 2019-11-07 20:08:10
    VUE 全屏页面 1、点击全屏按钮进入全屏模式 <img src="../../../assets/image/fullscreen_icon.png" class="full_icon" @click="rtPush"> rtPush(){ console.log("this.$route", this.$route); this.$...
  • js实现简单页面全屏

    万次阅读 2017-03-30 12:46:58
    js实现简单页面全屏全屏效果为传入div元素全屏:代码块<html> ; charset=utf-8" /> <body> ;height:600px;width:700px;"> <button id="btn">js控制
  • PC端页面全屏展示

    2020-10-20 17:44:17
    实现点击一个按钮,全屏展示,再点击退出全屏; html <div class="userImg userImg1"> <span v-if="!isFullScreen" class="fullScreenBtn" @click="handleFullScreen" > <svg-icon icon-class=...
  •  这篇文章主要介绍了js控制页面的全屏展示和退出全屏显示的方法,实例分析了javascript控制页面全屏效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了js控制页面的全屏展示和退出全屏...
  • HTML页面也可以实现全屏效果

    万次阅读 2016-09-18 14:31:28
    HTML页面也可以实现全屏效果
  • js浏览器页面页面元素全屏操作

    千次阅读 2015-10-29 17:24:23
    js浏览器页面页面元素全屏操作
  • iframe嵌套其它网站页面 全屏设置

    千次阅读 2020-08-31 18:08:18
    今天在使用iframe时,发现嵌套页面中有个【全屏】功能,不好使,查了一下,发现iframe还有1个属性allowfullscreen设置,可以设置是否支持全屏,默认是false,现在把iframe的基础属性整理一下。 iframe基本属性 ...
  • JS实现页面全屏功能

    千次阅读 2018-05-23 16:28:29
    //進入全屏launchFullscreen(element) { //此方法不可以在異步任務中執行,否則火狐無法全屏 if(element.requestFullscreen) { element.requestFullscreen(); } else if(element.mozRequestFullScreen) ...
  • vue页面实现全屏功能

    万次阅读 2018-09-10 16:02:05
    页面的楼层图,需要做一个全屏功能,在网上查找了很多方法(参考了这位博主的代码https://www.cnblogs.com/lyls/p/7446239.html);但是不兼容IE(IE可以实现全屏功能,但是不能退出全屏),代码如下: 修改之后的...
  • React 实现页面全屏效果

    千次阅读 2018-11-10 13:00:56
    HTML代码: &amp;amp;amp;amp;amp;amp;lt;a onClick={this.fullScreen} style={{ margin: &amp;amp;amp;amp;amp;...全屏&amp;amp;amp;amp;amp;amp;lt;/a&amp;amp;amp;amp;amp;am
  • HTML 页面 全屏

    千次阅读 2007-06-30 14:55:00
    html>head>meta http-equiv="Content-Type" content="text/html; charset=gb2312">title>无标题文档title> script language="JavaScript">... function MM_openBrWindow(theURL,winName,features) ...{
  • js控制页面全屏展示和退出全屏显示 js控制页面全屏展示和退出全屏显示 document.getElementById("btn").onclick=function(){ var elem = document.getElementById("content"); requestFullScreen...
  • VUE 设置页面全屏显示

    2021-04-20 17:54:59
    <style> /* #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50;... width:
  • 设置chrome启动指定页面全屏

    千次阅读 2018-08-30 17:19:56
    设置快捷的 目标C:\Users\XXX\AppData\Local\Google\Chrome\Application\chrome.exe – kiosk www.baidu.com 并且将快捷拖入启动文件夹里面 重启电脑就可以验证 浏览器自启动全屏到指定页面...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 64,391
精华内容 25,756
关键字:

如何让页面全屏