javascript full screen 全屏显示 页面元素

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

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

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();
},

 

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

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

<!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>

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

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

 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}");
}
}
}

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

 
 

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

  1. 全屏显示网页FULLSCREEN API

    第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...

  2. JavaScript实现全屏显示

    <!doctype html> <html> <head> <title>全屏显示</title> <meta charset=&qu ...

  3. js控制页面的全屏展示和退出全屏显示

    <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...

  4. 【温故而知新-Javascript】窗口效果 (全屏显示窗口、定时关闭窗口)

    1.全屏显示窗口 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  5. JavaScript全屏显示

    JavaScript全屏显示 需要引入的库 https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js https://cdn.bootcss.com/scr ...

  6. 如何在手机上实现 H5 页面全屏显示

    如何在手机上实现 H5 页面全屏显示 fullscreen 隐藏头部地址栏 隐藏底部导航栏 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才 ...

  7. JavaScript:让浏览器全屏显示

    并不是所有人都会按F11让浏览器全屏显示~~~ 一.直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...

  8. [转] JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件

    [From] http://www.jb51.net/article/76695.htm HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏AP ...

  9. 在VC++6.0开发中实现全屏显示

    全屏显示是一些应用软件程序必不可少的功能.比如在用VC++编辑工程源文件或编辑对话框等资源时,选择菜单“View\Full Screen”,即可进入全屏显示状态,按“Esc”键后会退出全屏显示状态. ...

随机推荐

  1. java_代码注释风格

    <?xml version="1.0" encoding="UTF-8" standalone="no"?><templa ...

  2. Android_显示器本身被卸载应用程序

    1.经jni实现功能 //LOG宏定义 #define LOG_INFO(tag, msg) __android_log_write(ANDROID_LOG_INFO, tag, msg) #defi ...

  3. 【专访】【Spring常见问题汇总】【05】

    种: 传播行为:传播行为定义了client与彼调用方法之间的事务边界. 隔离级别:隔离级别定义了一个事务可能受其它并发事务影响的程度. 仅仅读:表明事务是否是仅仅读的. 事务超时:指定事务执行的最长时 ...

  4. Font-Awesome 体验 鼠标进入图标变大

    <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> &l ...

  5. iOS开发---转换坐标系

    - (void)viewDidLoad { [super viewDidLoad]; // 蓝色 UIView *blue = [[UIView alloc] init]; blue.backgrou ...

  6. Quartz使用-入门使用(java定时任务实现)

    注:这里使用的是Quartz1.6.5版本号(包:quartz-1.6.5.jar) //測试main函数 //QuartzTest.java package quartzPackage; impor ...

  7. ios 安装OpenFire

    1.开发xmpp官网下载 2.打开openfire.pkg 3.点击继续 4.成功安装后打开偏好设置 ->双击poenfire->弹出窗体[好] 5.随后会弹出以下这个视图 开启 strr ...

  8. js 正则之检测素数

    原文:js 正则之检测素数 相信很多人应该看过这篇文章,我第一次看到的时候是11年的样子,那时候学vbs的时候看过这个问题.原文<检查素数的正则表达式>,在文章里已经解释了他是怎么判断的, ...

  9. EasyMonkeyDevice vs MonkeyDevice&HierarchyViewer API Mapping Matrix

    1. 前言 本来这次文章的title是写成和前几篇类似的<EasyMonkeyDevice API实践全记录>,内容也打算把每个API的实践和建议给记录下来,但后来想了下觉得这样子并不是最 ...

  10. C# 如何生成CHM帮助文件

    原文:C# 如何生成CHM帮助文件 前一段时间应公司要求,让我开发一个数据库字段信息CHM帮助文件生成软件.结果当时我就二了,这个东西我只用过,不知道咋做啊.没想到老大很随意说一句:"没事, ...