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 刷新全集常用代码
Nov 22 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
基于jQuery创建鼠标悬停效果的方法
Mar 07 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 Javascript
BootStrap selectpicker
Jun 20 Javascript
浅谈JS继承_寄生式继承 &amp; 寄生组合式继承
Aug 16 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
Feb 18 Javascript
jQuery实现鼠标跟随效果
Feb 20 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
vue的三种图片引入方式代码实例
Nov 19 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+MySQL的聊天室设计
2006/10/09 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
2019/09/26 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
JavaScript 空间坐标的使用
2020/08/19 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
[06:21]完美世界亚洲区首席发行官竺琦TI3采访
2013/08/26 DOTA
python中as用法实例分析
2015/04/30 Python
Python实现按中文排序的方法示例
2018/04/25 Python
Python3.7 读取 mp3 音频文件生成波形图效果
2019/11/05 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
python with (as)语句实例详解
2020/02/04 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
python实现计算器简易版
2020/12/17 Python
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
金蝶的一道SQL笔试题
2012/12/18 面试题
servlet面试题
2012/08/20 面试题
《青蛙看海》教学反思
2014/04/23 职场文书
2015社区健康教育工作总结
2015/05/20 职场文书
工伤认定行政答辩状
2015/05/22 职场文书
自信主题班会
2015/08/14 职场文书
体育部部长竞选稿
2015/11/21 职场文书
初中物理教学反思
2016/02/19 职场文书
导游词之山东孔庙
2019/11/04 职场文书
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL