在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. 【BZOJ4716】假摔 二分+暴力

    [BZOJ4716]假摔 Description [题目背景] 小Q最近喜欢上了一款游戏,名为<舰队connection>,在游戏中,小Q指挥强大的舰队南征北战,从而成为了一名dalao. ...

  2. Online Judge(字符串-格式)

    Online Judge Problem Description Ignatius is building an Online Judge, now he has worked out all the ...

  3. SharePoint服务器端对象模型 之 使用CAML进行数据查询（Part 2）

    (三)使用SPQuery进行列表查询 1.概述 列表查询主要是指在一个指定的列表(或文档库)中按照某些筛选.排序条件进行查询.列表查询主要使用SPQuery对象,以及SPList的GetItems方法 ...

  4. 关于微信小程序的开发步骤

    ~~~~包子最近在研究小程序 首先先讲一下小程序一些基本的步骤: 1.登录微信的公众平台,选择小程序,注册一个账号,期间有碰到什么交300块钱的就不要理他,因为我只是做demo,当然,准备上线的企业啥 ...

  5. distinct与NULL在count的注意事项

    select * from errorinfo ) from errorinfo select distinct info from errorinfo select count(distinct i ...

  6. ThreadLocal(四) : FastThreadLocal原理

    一.ThreadLocal的原理以及存在的问题 a. 每个线程内部维护了一个ThreadLocal.ThreadLocalMap类型的变量 b. ThreadLocalMap 的 key 为 Thre ...

  7. NPOI 导入 导出

    using NPOI.XSSF.UserModel;   using System.IO; 导入 /// <summary> /// Excel转换DataTable /// </s ...

  8. 剑指offer 面试21题

    面试21题: 题目:调整数组的顺序使奇数位于偶数前面 题一:输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有奇数位于数组的前半部分,所有偶数位于数组的后半部分. 解题思路:使用两个指针 ...

  9. Overload and Override without Overwrite - Java

    Override(覆盖/覆写): 子类Override父类中的函数(方法).Overload(重载): 同一个类中包含多个同名的函数(方法), 但各个函数的参数列表不同. Override和Overl ...

  10. Python基础（9）_生成器（yield表达式形式）、面向过程编程

    一.yield表达式形式 1 #装饰器,初始化含yield表达式的生成器 def init(func): def wrapper(*args,**kwargs): g=func(*args,**kwa ...