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 相关文章推荐
List Installed Software Features
Jun 11 Javascript
JavaScript脚本性能优化注意事项
Nov 18 Javascript
javascript window.opener的用法分析
Apr 07 Javascript
jquery单行文字向上滚动效果示例
Mar 06 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
总结几道关于Node.js的面试问题
Jan 11 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
angularjs实现上拉加载和下拉刷新数据功能
Jun 12 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
JavaScript中window和document用法详解
Jul 28 Javascript
JavaScript实现原型封装轮播图
Dec 27 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下正则来匹配dede模板标签的代码
2010/08/21 PHP
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
php获取远程文件的内容和大小
2015/11/03 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
js tab 选项卡
2009/04/26 Javascript
Javascript 解疑
2009/11/11 Javascript
js跟随滚动条滚动浮动代码
2009/12/31 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
基于Three.js插件制作360度全景图
2016/11/29 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
本地存储localStorage用法详解
2017/07/31 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
2019/02/27 jQuery
Python获取服务器信息的最简单实现方法
2015/03/05 Python
python计算圆周率pi的方法
2015/07/11 Python
浅谈django中的认证与登录
2016/10/31 Python
Python机器学习logistic回归代码解析
2018/01/17 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
python 根据时间来生成唯一的字符串方法
2019/01/14 Python
Python常用的json标准库
2019/02/19 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
Python正则表达式如何匹配中文
2020/05/27 Python
database面试题
2013/03/28 面试题
JSP&Servlet技术面试题
2015/05/21 面试题
行政前台岗位职责
2013/12/04 职场文书
岗位聘任报告
2015/03/02 职场文书
实习介绍信范文
2015/05/05 职场文书
民事答辩状格式范文
2015/05/21 职场文书
《暗黑破坏神2:重制版》本周进行第一轮A测 目前可官网进行申请报名
2021/04/07 其他游戏