在web系统中实现按钮控制浏览器全屏。

<!DOCTYPE html>

<%@ page contentType="text/html;charset=UTF-8"%>

<html>

<head>

<meta charset="utf-8">

<title>全屏事件</title>

<script src="http://www.jqueryfuns.com/Content/js/jquery-1.8.3.min.js"></script>

<script type="text/javascript">

//处理全屏兼容浏览器问题

function fullScreen(el) {

//支持谷歌等其它浏览器

var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,

wscript;

if(typeof rfs != "undefined" && rfs) {

rfs.call(el);

return;

}

//支持IE

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

}

}

}

</script>

<style type="text/css">

/* html,body{

width: 100%;

height: 100%;

} */

</style>

</head>

<body>

<button id='btn'>全屏按钮</button>

<div id="content" style="background:yellow;width:100%;height:100%;">sljfsdlfj

<div id="quite" class="btn">退出全屏</div>

</div>

</body>

<script type="text/javascript">

//触发事件

window.onload = function(){

var btn = document.getElementById('btn');

var content = document.getElementById('content');

btn.onclick = function(){

fullScreen(content);

}

var quite = document.getElementById('quite');

quite.onclick = function(){

exitFullScreen();

}

}

</script>

</html>

jsp实现浏览器全屏的更多相关文章

  1. JavaScript：让浏览器全屏显示

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

  2. 用html5 js实现浏览器全屏

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...

  3. 兼容IE浏览器的js浏览器全屏代码

    众所周知,IE是个奇葩的浏览器,但是由于用户量很大,开发者还是不得不为IE考虑一下,于是,各种浏览器相关的操作,都要多一个特别的判断——专门针对IE浏览器的判断,这里的全屏也不例外.看代码: func ...

  4. [JavaScript] 用html5 js实现浏览器全屏

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的 效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以 让页面中的图片,视频等全屏目前只有g ...

  5. 浏览器全屏之requestFullScreen全屏与F11全屏

    一.简介 浏览器全屏有两种方式,一种是HTML5新增的requestFullscree全屏,另一种是摁F11实现的全屏,本文将详解两种全屏的特点以及实现代码. 二.requestFullscreen全 ...

  6. js 实现各浏览器全屏

    现代浏览器包括ie11,可以直接用h5的全屏api实现 低版本的IE需要通过ActiveX插件实现: 代码实现 <!DOCTYPE html> <html> <head& ...

  7. Egret--设置全屏，控制浏览器全屏

    1, 手机浏览器打开的项目的时候,浏览器的虚拟按键/标题栏, 使得即便设置全屏也没有变成全屏(好像JS 中有方法向浏览器请求全屏) 2, 加载资源, 关闭后卸载, 再次进入游戏依然很快.不过登陆游戏的 ...

  8. html5 js实现浏览器全屏

    全屏 var docElm = document.documentElement; //W3C if (docElm.requestFullscreen) { docElm.requestFullsc ...

  9. HTML5 JS 实现浏览器全屏(F11的效果)

    项目中有需要使用JS来控制浏览器全屏的方法 DEMO地址: http://zhongxia245.github.io/demo/js2fullpanel.html function fullScree ...

随机推荐

  1. 纯CSS3文字效果推荐

    之前曾经研究过几个纯css实现的文字效果,<CSS文字条纹阴影动画>和<响应式奶油立体字效果>等,今天我们来研究几款文字效果,主要利用text-shadow.webkit内核的 ...

  2. 我的Android进阶之旅------>Android的ListView数据更新后，如何使最新的条目可以自动滚动到可视范围内？

    在ListView的layout配置中添加 android:transcriptMode="alwaysScroll" <ListView android:id=" ...

  3. PAT 1073 多选题常见计分法 （20 分）

    批改多选题是比较麻烦的事情,有很多不同的计分方法.有一种最常见的计分方法是:如果考生选择了部分正确选项,并且没有选择任何错误选项,则得到 50% 分数:如果考生选择了任何一个错误的选项,则不能得分.本 ...

  4. Bridge Method

    1.java编译器采用Bridge Method 来兼容本该使用泛型的地方使用了非泛型的问题. public class TestBridgeMethod { public static void m ...

  5. SQL语句中的Having子句与where子句

    一.介绍 聚合函数如SUM, COUNT, MAX, AVG等.这些函数和其它函数的根本区别就是它们一般作用在多条记录上.而通过使用GROUP BY 子句,可以让SUM 和 COUNT 这些函数对属于 ...

  6. Spring Cloud架构

    Spring Cloud主要的组件,以及它的访间流程  1.外部或者内部的非 Spring Cloud目都统一通过API网关(Zuul)来访可内部服务.  2.网关接收到请求后,从注册中心( Eure ...

  7. Java基础—Java运行原理

    Java程序运行原理 在Java中引入了虚拟机(JVM,Java Virtual Machine)的概念,即在机器和编译程序之间加入了一层抽象的虚拟的机器.虚拟机在任何平台上都提供给编译程序一个的共同 ...

  8. javascript高级语法三

    一.js的正则表达式 1.什么是正则表达式 正则表达式(regular expression)是一个描述字符模式的对象,ECMAScript的RegExp类表示正则表达式,而String和RegExp ...

  9. Python基础（18）_面向对象程序设计2（反射、__str__、__del__、__item__系列）

    一 isinstance(obj,cls)和issubclass(sub,super) isinstance(obj,cls)检查是否obj是否是类 cls 的对象 class Foo(object) ...

  10. Python基础（15）_python模块、包

    一.模块 1.什么是模块:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀 模块的本质:模块的本质是一个py文件 2.模块分为三类:1)内置模块:2)第三方模块: ...