js全屏显示显示代码的三种方法


Posted in Javascript onNovember 11, 2013

第一种:
       在已经打开的一个普通网页上,点击“全屏显示”,然后进入该网页对应的全屏模式。方法为:在网页的<body>与</body>之间加入以下代码:

<form>
<input type="BUTTON" name="FullScreen" value="全屏显示" onClick="window.open(document.location, 'big', 'fullscreen=yes')">
 </form>
 

        如果全屏显示的不是本页,则只需要把document.location换为对应的网址即可,即如下代码:
<form>
<input type=BUTTON name=FullScreen value=全屏显示 onClick="window.open('URL地址','big','fullscreen=yes')">
 </form>
 

第二种:
       在运行一个网页时,比如你在网址栏里直接输入:http://localhost:8080/temp.jsp,此时关闭该网页,同时显示一个空白的全屏网页,方法为:在body里写如下代码:
 
<body onload=window.open('','',fullscreen=1);opener=null;window.close()>
</body>

第三种:
        其实就是以上两种的叠加,一般这种情况也用的比较多。就是直接打开一个网页的时候,就进入它的全屏模式,这种情况就和第一种不同了,因为第一种,当你点击了“全屏显示”按钮后,它是新打开一个全屏的网页,但是原来普通的那个网页仍然有,所以,这个就比较好一些。方法为:建立两个jsp文件,第一个里只运行如下代码,比如名字叫demo.jsp;第二个则是你实际要运行的内容,比如叫:temp.jsp:

demo.jsp:

<body   onload="window.open('temp.jsp','_blank','fullscreen=1');opener=null;window.close()"></body>

temp.jsp:
<%@ page contentType="text/html;charset=GB2312" language="java" %>
<html>
<body>
这里就是我的全屏内容,再看看原来我们在地址栏里输入的demo.jsp,是不是关闭了?OK,搞定!
</body>
</html>

退出全屏
--------------------------------------------------------------------------------------------------------------------------------------------------------------------

对于退出全屏,我上网也搜过很多资料,总体来说,都很难达到我们期望的目标,比如:我们可以加一个超链接 <a href="" target="_blank">在新窗口打开;也可以应用上面打开全屏的方法的逆方法来做。但是,无论怎么搞,最后从全屏往普通模式切换的时候,总是相当于重新打开一个窗口,这样,加入我们原来的全屏模式正在放电影,你如果切换一下成普通模式,就得重新加载,这肯定不行。但是,没办法,我现在就参看这篇帖子里的5楼的回复:http://topic.csdn.net/t/20021028/12/1130882.html,就这个方法,大致上还过的去,只不过,它这个方法不叫全屏,相当于是把窗口向上平移了一定得高度,我们仍然可以拖动窗口。代码如下:

<%@ page contentType="text/html;charset=GB2312" language="java" %>
<script   language="JScript"> 
       var   o=1; 
function   goResize()
{ 
      var   d=document.body,e=event,m=event.srcElement;o?
   new   function(){moveBy(e.clientX-e.screenX,e.clientY- e.screenY);resizeBy(screen.availWidth-d.offsetWidth,screen.availHeight- d.offsetHeight);m.value="取消";o=0}:
    new   function(){moveTo(0,0);resizeTo(screen.availWidth,screen.availHeight);m.value="全屏";o=1}
 } 
</script> 
<input   type="button"   value="全屏"   onclick="goResize()">

关闭页面
--------------------------------------------------------------------------------------------------------------------------------------------------------------------

如果要关闭页面,那么只需要在页面中加上这么一个超链接即可:

<a href="javascript:self.close()" >关闭窗口</a>
Javascript 相关文章推荐
jquery阻止冒泡事件使用模拟事件
Sep 06 Javascript
javascript静态页面传值的三种方法分享
Nov 12 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
深入理解vue.js中的v-if和v-show
Jun 22 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
bootstrap table表格插件之服务器端分页实例代码
Sep 12 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
JavaScript获取多个数组的交集简单实例
Nov 11 #Javascript
JavaScript splice()方法详解
Sep 22 #Javascript
javascript与cookie 的问题详解
Nov 11 #Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 #Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 #Javascript
AJAX跨域请求json数据的实现方法
Nov 11 #Javascript
Javascript弹出窗口的各种方法总结
Nov 11 #Javascript
You might like
URL Rewrite的设置方法
2007/01/02 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
为jQuery增加join方法的实现代码
2010/11/28 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
JQuery+Ajax无刷新分页的实例代码
2014/02/08 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
jquery实现楼层滚动效果
2018/01/01 jQuery
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
jQuery模拟12306城市选择框功能简单实现方法示例
2018/08/13 jQuery
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
微信小程序swiper禁止用户手动滑动代码实例
2019/08/23 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
2020/07/17 Javascript
[48:26]VGJ.S vs infamous Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
举例讲解Python中is和id的用法
2015/04/03 Python
Python下的twisted框架入门指引
2015/04/15 Python
python range()函数取反序遍历sequence的方法
2018/06/25 Python
Python安装Flask环境及简单应用示例
2019/05/03 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
详解Pycharm第三方库的安装及使用方法
2020/12/29 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
俄罗斯商务邀请函
2014/01/26 职场文书
电脑专业个人求职信范文
2014/02/04 职场文书
法学专业自我鉴定
2014/02/05 职场文书
讲座主持词
2014/03/20 职场文书
公司授权委托书范本
2014/09/18 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
2021/05/25 HTML / CSS
python实现简单石头剪刀布游戏
2021/10/24 Python
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA