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 相关文章推荐
小议javascript 设计模式 推荐
Oct 28 Javascript
JavaScript 读取元素的CSS信息的代码
Feb 07 Javascript
Javascript将string类型转换int类型
Dec 09 Javascript
jQuery ul标签下拉菜单演示代码
Dec 11 Javascript
jQuery操作Select的Option上下移动及移除添加等等
Nov 18 Javascript
javascript中的if语句使用介绍
Nov 20 Javascript
jquery 表格排序、实时搜索表格内容(附图)
May 19 Javascript
JQuery跳出each循环的方法
Apr 16 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
20个最常见的jQuery面试问题及答案
May 23 jQuery
浅谈vue父子组件怎么传值
Jul 21 Javascript
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 Vue.js
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
桌面中心(一)创建数据库
2006/10/09 PHP
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
PHP错误Allowed memory size of 67108864 bytes exhausted的3种解决办法
2014/07/28 PHP
php计算整个mysql数据库大小的方法
2015/06/19 PHP
PHP Class SoapClient not found解决方法
2018/01/20 PHP
JavaScript 仿关机效果的图片层
2008/12/26 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
2016/07/01 Javascript
精彩的Bootstrap案例分享 重点在注释!(选项卡、栅格布局)
2016/07/01 Javascript
jquery做个日期选择适用于手机端示例
2017/01/10 Javascript
Vue.js结合Ueditor富文本编辑器的实例代码
2017/07/11 Javascript
js图片轮播插件的封装
2017/07/21 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
Python 描述符(Descriptor)入门
2016/11/20 Python
Python中.join()和os.path.join()两个函数的用法详解
2018/06/11 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
python中for循环把字符串或者字典添加到列表的方法
2019/07/20 Python
Python os库常用操作代码汇总
2020/11/03 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
如何利用cmp命令比较文件
2016/04/11 面试题
大学学习生活感言
2014/01/18 职场文书
元宵节晚会主持人串词
2014/03/25 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
语文复习计划
2015/01/19 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书
2019通用版劳动合同范本!
2019/07/11 职场文书
springboot项目以jar包运行的操作方法
2021/06/30 Java/Android
HDFS免重启挂载新磁盘
2022/04/06 Servers