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 相关文章推荐
在IE下获取object(ActiveX)的Param的代码
Sep 15 Javascript
jquery解析xml字符串简单示例
Apr 11 Javascript
如何调试异步加载页面里包含的js文件
Oct 30 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
JavaScript 开发工具webstrom使用指南
Dec 09 Javascript
vue组件实例解析
Jan 10 Javascript
js实现股票实时刷新数据案例
May 14 Javascript
5 种JavaScript编码规范
Jan 30 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
关于angular浏览器兼容性问题的解决方案
Jul 26 Javascript
vue 导出文件,携带请求头token操作
Sep 10 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
社区(php&amp;&amp;mysql)四
2006/10/09 PHP
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
php的ZipArchive类用法实例
2014/10/20 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008/08/14 Javascript
用cssText批量修改样式
2009/08/29 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
编写简单的jQuery提示插件
2014/12/21 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
用window.onerror捕获并上报Js错误的方法
2016/01/27 Javascript
JQuery为元素添加样式的实现方法
2016/07/20 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
详解vue-cli中的ESlint配置文件eslintrc.js
2017/09/25 Javascript
微信小程序版翻牌小游戏
2018/01/26 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
vue如何实现动态加载脚本
2020/02/05 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
python如何统计代码运行的时长
2019/07/24 Python
python爬虫增加访问量的方法
2019/08/22 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
python 代码运行时间获取方式详解
2020/09/18 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
The North Face意大利官网:服装、背包和鞋子
2020/06/17 全球购物
应届大学生简历中的自我评价
2014/01/15 职场文书
小学英语教学反思案例
2014/02/04 职场文书
三项教育活动实施方案
2014/03/30 职场文书
法人单位适用的授权委托书
2014/09/19 职场文书
初中生旷课检讨书范文
2014/10/06 职场文书
教师听课评语大全
2014/12/31 职场文书
个性发展自我评价2015
2015/03/09 职场文书
投诉信回复范文
2015/07/03 职场文书
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python