javascript full screen 全屏显示 页面元素
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 全屏显示 页面元素的更多相关文章
- 全屏显示网页FULLSCREEN API
第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...
- JavaScript实现全屏显示
<!doctype html> <html> <head> <title>全屏显示</title> <meta charset=&qu ...
- js控制页面的全屏展示和退出全屏显示
<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/h ...
- 【温故而知新-Javascript】窗口效果 (全屏显示窗口、定时关闭窗口)
1.全屏显示窗口 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- JavaScript全屏显示
JavaScript全屏显示 需要引入的库 https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js https://cdn.bootcss.com/scr ...
- 如何在手机上实现 H5 页面全屏显示
如何在手机上实现 H5 页面全屏显示 fullscreen 隐藏头部地址栏 隐藏底部导航栏 refs xgqfrms 2012-2020 www.cnblogs.com 发布文章使用:只允许注册用户才 ...
- JavaScript:让浏览器全屏显示
并不是所有人都会按F11让浏览器全屏显示~~~ 一.直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...
- [转] JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
[From] http://www.jb51.net/article/76695.htm HTML 5中的full screen,目前可以在除IE和opera外的浏览器中使用 ,有的时候用来做全屏AP ...
- 在VC++6.0开发中实现全屏显示
全屏显示是一些应用软件程序必不可少的功能.比如在用VC++编辑工程源文件或编辑对话框等资源时,选择菜单“View\Full Screen”,即可进入全屏显示状态,按“Esc”键后会退出全屏显示状态. ...
随机推荐
- C#中利用双缓冲技术解决绘图闪屏问题。
这段时间在做一个小型游戏,在界面显示的时候用到了一些图形.一开始涉及到的图形全都用控件的背景图片代替了.这样游戏运行的时候存在的一个很大的问题是游戏运行很慢.小组成员费尽周折,即将放弃,每一个成员都愁 ...
- Linq实现对XML的简单增删查改
一.传统DOM创建XML方法 private static void CreateXmlDocWithDom() { XmlDocument doc =new XmlDocument(); XmlEl ...
- hdu 3874
求一个序列中全部数字的和,当中数值同样的仅仅能计算一次. 先储存全部的请求,然后依照它们的右边界排序,在查询的同一时候更新区间.这里事实上有一点点DP的味道,在它进行某个查询之前,保证全部的反复数字( ...
- csu 1503: 点弧之间的距离-湖南省第十届大学生计算机程序设计大赛
这是--比量p并用交点连接中心不上弧.在于:它至p距离.是不是p与端点之间的最短距离 #include<iostream> #include<map> #include< ...
- 算法 & 分析 (收集)
算法一:快速排序算法 快速排序是由东尼·霍尔所发展的一种排序算法.在平均状况下,排序 n 个项目要Ο(n log n)次比较.在最坏状况下则需要Ο(n2)次比较,但这种状况并不常见.事实上,快速排序通 ...
- Webserver管理系列:3、Windows Update
微软的操作系统可以使用用户过程中发现了一些漏洞,因此,他们经常发布一些系统补丁.因此,我们需要自己主动安装更新功能后,打开系统. 默认的更新功能未开启自己主动: 开启自己主动更新功能后.Windows ...
- Java设计模式偷跑系列(21)建模和实现享受metapatterns
转载请注明出处:http://blog.csdn.net/lhy_ycu/article/details/40021651 享元模式(Flyweight):运用共享的技术有效地支持大量细粒度的对象. ...
- PHP_零基础学php
现在学习php的工具有很多,所以一般没必要去搭建环境,我用的工具是phpstudy,IDE是Eclipse 1,用php输出一段文字 <html> <head> <tit ...
- iOS_中国汉字到拼音_pinyin4objc
最后效果图: ViewController.h // // ViewController.h // PinYin4Objc汉字转拼音演示demo // // Created by beyond on ...
- MySql绿色版配置及使用详解
原文:MySql绿色版配置及使用详解 最近在做项目开发时用到了MySql数据库,在看了一些有关MySql的文章后,很快就上手使用了.在使用的过程中还是出现了一些问题,因为使用的是绿色免安装版的MySq ...