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 相关文章推荐
取键盘键位ASCII码的网页
Jul 30 Javascript
基于jquery的鼠标拖动效果代码
May 30 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
Jquery的hover方法让鼠标经过li时背景变色
Sep 06 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
仿JQuery输写高效JSLite代码的一些技巧
Jan 13 Javascript
使用iojs的jsdom库实现同步系统时间
Apr 20 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
Sep 18 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 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上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
php中实现用数组妩媚地生成要执行的sql语句
2015/07/10 PHP
PHP 9 大缓存技术总结
2015/09/17 PHP
CodeIgniter生成静态页的方法
2016/05/17 PHP
php使用preg_match()函数验证ip地址的方法
2017/01/07 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
laravel 时间格式转时间戳的例子
2019/10/11 PHP
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
JS函数的几种定义方式分析
2015/12/17 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
微信小程序之购物车功能
2020/09/23 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
基于Vue中的父子传值问题解决
2020/07/27 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
浅谈终端直接执行py文件,不需要python命令
2017/01/23 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
用python画一只可爱的皮卡丘实例
2019/11/21 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
基于python实现复制文件并重命名
2020/09/16 Python
让你相见恨晚的十个Python骚操作
2020/11/18 Python
python爬虫 requests-html的使用
2020/11/30 Python
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
纺织工程专业个人求职信范文
2014/01/27 职场文书
班委竞选演讲稿
2014/04/28 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS