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实现的图片马赛克后显示并切换加文字功能
Apr 21 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
详解JavaScript中的forEach()方法的使用
Jun 08 Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
May 04 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
详解Ubuntu安装angular-cli遇到的坑
Sep 08 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
关于AOP在JS中的实现与应用详解
May 06 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
phpfans留言版用到的install.php
2007/01/04 PHP
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
php中将指针移动到数据集初始位置的实现代码[mysql_data_seek]
2012/11/01 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
JavaScript脚本性能优化注意事项
2008/11/18 Javascript
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
js中更短的 Array 类型转换
2011/10/30 Javascript
JS生成随机字符串的多种方法
2014/06/10 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
简单说明Python中的装饰器的用法
2015/04/24 Python
python分割列表(list)的方法示例
2017/05/07 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
python3编写ThinkPHP命令执行Getshell的方法
2019/02/26 Python
python中的数据结构比较
2019/05/13 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
Python获取一个用户名的组ID过程解析
2019/09/03 Python
python生成特定分布数的实例
2019/12/05 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
django 链接多个数据库 并使用原生sql实现
2020/03/28 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
Linux如何压缩可执行文件
2013/10/21 面试题
招商业务员岗位职责
2013/12/16 职场文书
债务纠纷委托书
2014/08/30 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
小学作文之描写天气
2019/08/15 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
python可视化大屏库big_screen示例详解
2021/11/23 Python
JavaScript实现两个数组的交集
2022/03/25 Javascript