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基本概念初级讲解论坛贴的学习记录
Feb 22 Javascript
JQuery学习笔录 简单的JQuery
Apr 09 Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 Javascript
jQuery实现菜单式图片滑动切换
Mar 14 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
微信小程序之数据缓存的实例详解
Sep 29 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
Sep 06 Javascript
javascript-hashchange事件和历史状态管理实例分析
Apr 18 Javascript
微信jssdk踩坑之签名错误invalid signature
May 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
thinkphp 一个页面使用2次分页的实现方法
2013/07/15 PHP
PHP的简单跳转提示的实现详解
2019/03/14 PHP
thinkphp5框架路由原理与用法详解
2020/02/11 PHP
PHP如何开启Opcache功能提升程序处理效率
2020/04/27 PHP
两个select之间option的互相添加操作(jquery实现)
2009/11/12 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
js实现选中复选框文字变色的方法
2015/08/14 Javascript
Javascript闭包实例详解
2015/11/29 Javascript
使用jQuery实现简单的tab框实例
2017/08/22 jQuery
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
Vue组件之自定义事件的功能图解
2018/02/01 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
javascript动态创建对象的属性详解
2018/11/07 Javascript
layui-table获得当前行的上/下一行数据的例子
2019/09/24 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
Python向日志输出中添加上下文信息
2017/05/24 Python
Python异常处理知识点总结
2019/02/18 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
python 实现单通道转3通道
2019/12/03 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
如何用Python和JS实现的Web SSH工具
2021/02/23 Python
移动端适配 使px自动转换rem
2019/08/26 HTML / CSS
介绍一下内联、左联、右联
2013/12/31 面试题
求职自荐信格式
2013/12/04 职场文书
不服从公司安排检讨书
2014/09/24 职场文书
2014年稽查工作总结
2014/12/20 职场文书
绿色环保倡议书
2015/04/28 职场文书
十大冰系宝可梦排名,颜值最高的阿罗拉九尾,第三使用率第一
2022/03/18 日漫
SpringBoot Http远程调用的方法
2022/08/14 Java/Android