javascript full screen 全屏显示 页面元素

时间：2022-09-12 12:12:32

javascript full screen 全屏显示 页面元素

要想让页面的某个元素全屏显示，就像在网页上看视频的时候，可以全屏观看一样，该怎么实现呢？

一种最简单的方式，就是动态改变你想要全屏显示的部件的style，例如position变成absolute，height和width都设置成窗口大小，并且把背景颜色改成全白（为了遮住页面上其余的元素）。这样网页上就只能看到你要突出的部件了，视觉上就等同于全屏。同时利用javascript监听键盘事件，一旦用户按了ESc退出键，就恢复原来的样子。部分代码如下：

javascript full screen 全屏显示 页面元素
document.onkeydown = function (event) {

        var e = event || window.event || arguments.callee.caller.arguments[0];

        if (e && e.keyCode == 27) { //ESC键

            $('.navbar-inner').fadeIn(100);

            var maintable = document.getElementById("holder");

            maintable.style.position = "relative";

            maintable.style.height = "100%";

            maintable.style.width = "100%";

            maintable = document.getElementById("main");

            maintable.style.height = "100%";

            maintable.style.width = "100%";

            maintable.style.left = 0 + "px";

            maintable.style.top = 0 + "px";

            resizePlots();

        }

    };

fullScreenClick: function () {

$('.navbar-inner').fadeOut(100);

var maintable = document.getElementById("holder");
maintable.style.position = "absolute";
maintable.style.background = "#fff";
//maintable.style.zIndex = 5;
maintable.style.height = $(window).height() + "px";
maintable.style.width = $(window).width() + "px";
maintable.style.left = 0 + "px";
maintable.style.top = 0 + "px";



maintable = document.getElementById("main");
maintable.style.height = "90%";
maintable.style.width = "90%";
maintable.style.left = $(window).width() * 0.05 + "px";
maintable.style.top = $(window).height() * 0.02 + "px";
resizePlots();
},


 


javascript full screen 全屏显示 页面元素




但是这样做有个缺点，就是还需要手工按一下F11来达到真正的全屏。


下面有一种方法不用自己按F11的：




javascript full screen 全屏显示 页面元素


<!DOCTYPE html>

<html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<body  >

<button id="btn" > full screen </button>

<div id="content" style="height:500px;width:500px;background:#fff">

<h1>欢迎微博互粉！</h1>

<h2>weibo.com/leavingseason</h2>

<p>相信音乐，相信五月天</p>

</div>

</body>

 <script language="JavaScript">

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

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

requestFullScreen(elem);

}; 

function requestFullScreen(element) {

    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;

    if (requestMethod) {

        requestMethod.call(element);

    } else if (typeof window.ActiveXObject !== "undefined") {

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

        if (wscript !== null) {

            wscript.SendKeys("{F11}");

        }

    }

} 

</script>

</html>


javascript full screen 全屏显示 页面元素




这个可以支持大部分的浏览器。但是讨厌的IE还是不能支持HTML5的全屏功能，需要模拟按F11这个动作。读者可以在代码中看到。


还可以在代码里面退出全屏界面：




javascript full screen 全屏显示 页面元素


 function cancelFullScreen(el) {

            var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;

            if (requestMethod) { // cancel full screen.

                requestMethod.call(el);

            } else if (typeof window.ActiveXObject !== "undefined") { // Older IE.

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

                if (wscript !== null) {

                    wscript.SendKeys("{F11}");

                }

            }

        }


javascript full screen 全屏显示 页面元素




关于全屏显示，我还是很好奇，那么视频网站是如何做到对IE等浏览器都兼容的全屏功能的。如果有谁知道的话，还请分享一下，感激不尽。




 


 

														
		
javascript full screen 全屏显示 页面元素的更多相关文章
	

    

  1. 
全屏显示网页FULLSCREEN API
		
    第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...
    
		
    2. 
						
  2. 
JavaScript实现全屏显示
		
    <!doctype html> <html> <head> <title>全屏显示</title> <meta charset=&qu ...
    
		
    3. 
						
  3. 
js控制页面的全屏展示和退出全屏显示
		
    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...
    
		
    4. 
						
  4. 
【温故而知新-Javascript】窗口效果 （全屏显示窗口、定时关闭窗口）
		
    1.全屏显示窗口 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
    
		
    5. 
						
  5. 
JavaScript全屏显示
		
    JavaScript全屏显示 需要引入的库 https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js https://cdn.bootcss.com/scr ...
    
		
    6. 
						
  6. 
如何在手机上实现 H5 页面全屏显示
		
    如何在手机上实现 H5 页面全屏显示 fullscreen 隐藏头部地址栏 隐藏底部导航栏 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才 ...
    
		
    7. 
						
  7. 
JavaScript：让浏览器全屏显示
		
    并不是所有人都会按F11让浏览器全屏显示~~~ 一.直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...
    
		
    8. 
						
  8. 
&lbrack;转&rsqb; JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
		
    [From] http://www.jb51.net/article/76695.htm HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏AP ...
    
		
    9. 
						
  9. 
在VC&plus;&plus;6&period;0开发中实现全屏显示
		
    全屏显示是一些应用软件程序必不可少的功能.比如在用VC++编辑工程源文件或编辑对话框等资源时,选择菜单“View\Full Screen”,即可进入全屏显示状态,按“Esc”键后会退出全屏显示状态.  ...
    
		
    10. 
		


随机推荐
	

    

  1. 
使用ReSharper打造团队代码检查流程
			
    首先我想跟大家分享一下我们团队的代码检查流程. 1. 项目经理随时会检查成员的代码,如果发现有不符合规范的代码,会在注释里面加todo.比如,假设leo的代码不符合规范,那么项目经理就会加注释: // ...
    
			
    2. 
						
  2. 
python【1】-基础知识
			
    1.简介 python是一种解释性的.面向对象的.带有动态语义的高级程序设计语言. 廖雪峰网站:http://www.liaoxuefeng.com/wiki/001374738125095c955c ...
    
			
    3. 
						
  3. 
linux test 命令使用
			
    1. 关于某个文件名的『类型』侦测(存在与否),如 test -e filename -e 该『文件名』是否存在?(常用) -f 该『文件名』是否为文件(file)?(常用) -d 该『文件名』是否为 ...
    
			
    4. 
						
  4. 
IELTS - Word List 28
			
    1, The lawsuit is very much o the lawyer's mind. 2, The canteen was absolutely packed. 3, Doctors di ...
    
			
    5. 
						
  5. 
HDU 2546 饭卡 01背包变形
			
    题目大意:中文题就不多说了 题目思路:由题意可知,只要高于5元,就可以随便刷,那我们就把最贵的留在最后刷.但是如果低于5元就什么也不能刷(哪怕你要买的物品价格不足五元),所以我们可以先求出(n-5)元 ...
    
			
    6. 
						
  6. 
transform-origin 的定位
			
    transform-origin接受两个参数,它们可以是百分比,em,px等具体的值,也可以是left,center,right,或者 top,center,bottom等描述性参数,第一个参数表示X ...
    
			
    7. 
						
  7. 
JavaScript（四）操作符
			
      6种表达式 原始表达是  初始化表达式 函数定义表达式 函数调用表达式 属性访问表达式 对象创建表达式 操作符 操作符的优先级 属性访问[] .  >  一元操作符 >  */ &gt ...
    
			
    8. 
						
  8. 
Pychram 在model中修改class属性值后更新到Navicat Premium中
			
    一.pycharm数据更新的问题bug问题 1.在更改user_email字端属性后出现数据库信息无法更新到数据库,出现的bug原因是数据库修改了属性之后没有做migrate 和 makemigrat ...
    
			
    9. 
						
  9. 
【POJ1151】Atlantis
			
    题目大意:给定 N 个矩形,求这些矩形的面积并. 题解:采用扫描线算法. 首先,按照矩形的横坐标排序,在纵坐标方向上维护一根扫描线被覆盖的长度,在这里采用线段树维护.统计答案时,从左到右扫描 2N 个 ...
    
			
    10. 
						
  10. 
angular插件制作——Directive指令使用详解
			
    1.replace——最简单的使用方法,直接将自定义标签替换为模板内的内容:  html: <!DOCTYPE html> <html> <head> <me ...
    
			
    11. 
			
相关文章