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中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
JS 打印功能代码可实现打印预览、打印设置等
Oct 31 Javascript
jquery滚动加载数据的方法
Mar 09 Javascript
javascript基础知识
Jun 07 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
Jun 17 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
Angular中管道操作符(|)的使用方法
Dec 15 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
jQuery操作元素追加内容示例
Jan 10 jQuery
基于小程序请求接口wx.request封装的类axios请求
Jul 02 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
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
DSP接收机前端设想
2021/03/02 无线电
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
PHP查询数据库中满足条件的记录条数(两种实现方法)
2013/01/29 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
优化Node.js Web应用运行速度的10个技巧
2014/09/03 Javascript
JS判断字符串字节数并截取长度的方法
2016/03/05 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
input file上传 图片预览功能实例代码
2016/10/25 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
Angular中管道操作符(|)的使用方法
2017/12/15 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
浅谈django2.0 ForeignKey参数的变化
2019/08/06 Python
Python简单实现词云图代码及步骤解析
2020/06/04 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
经典C++面试题一
2016/11/06 面试题
美术教师自我鉴定
2014/02/12 职场文书
任命书格式
2014/06/05 职场文书
教师节主题班会教案
2015/08/17 职场文书
pytorch 6 batch_train 批训练操作
2021/05/28 Python