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 相关文章推荐
js 方法实现返回多个数据的代码
Apr 30 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
Javascript中With语句用法实例
May 14 Javascript
jQuery实现带延迟效果的滑动菜单代码
Sep 02 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
jQuery中ajax错误调试分析
Dec 01 Javascript
js正则表达式验证密码强度【推荐】
Mar 03 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
Jul 22 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 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 中的4种标记风格介绍
2012/05/10 PHP
解析thinkphp import 文件内容变量失效的问题
2013/06/20 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
Yii 访问 Gii(脚手架)时出现 403 错误
2018/06/06 PHP
php服务器的系统详解
2019/10/12 PHP
yepnope.js 异步加载资源文件
2011/09/08 Javascript
JQuery中extend使用介绍
2014/03/13 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
JavaScript运算符小结
2015/06/03 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
JavaScript实现的CRC32函数示例
2016/11/23 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
vue 动态绑定背景图片的方法
2018/08/10 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
基于vue.js组件实现分页效果
2018/12/29 Javascript
vue 实现特定条件下绑定事件
2019/11/09 Javascript
[01:10]DOTA2 Supermajor:英雄,由我们见证
2018/05/14 DOTA
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
python实现员工管理系统
2018/01/11 Python
python之DataFrame实现excel合并单元格
2021/02/22 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
使用keras内置的模型进行图片预测实例
2020/06/17 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
初中生自我评价
2014/02/01 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
大队委员竞选稿
2015/11/20 职场文书
初中信息技术教学反思
2016/02/16 职场文书
庭外和解协议书
2016/03/23 职场文书
TypeScript中条件类型精读与实践记录
2021/10/05 Javascript