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 相关文章推荐
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
JavaScript flash复制库类 Zero Clipboard
Jan 17 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
用javascript将数据导入Excel示例代码
Sep 10 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
Bootstrap Chart组件使用教程
Apr 28 Javascript
jQuery鼠标移动图片上实现放大效果
Jun 25 jQuery
为什么要使用Vuex的介绍
Jan 19 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
使用JS来动态操作css的几种方法
Dec 18 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
php2html php生成静态页函数
2008/12/08 PHP
PHP常用的缓存技术汇总
2014/05/05 PHP
php提取字符串中网站url地址的方法
2014/12/03 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
jquery获取子节点和父节点的示例代码
2013/09/10 Javascript
js导入导出excel(实例代码)
2013/11/25 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
js对象数组和对象的使用实例详解
2019/08/27 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
Python中的引用知识点总结
2019/05/20 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
Python3中的f-Strings增强版字符串格式化方法
2020/03/04 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
Python获取excel内容及相关操作代码实例
2020/08/10 Python
美国牙科折扣计划:DentalPlans.com
2019/08/26 全球购物
工程预算与管理应届生求职信
2013/10/06 职场文书
2014年秘书工作总结
2014/11/25 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
奖学金发言稿(范文)
2019/08/21 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android
Vue Element-ui表单校验规则实现
2021/07/09 Vue.js
Oracle以逗号分隔的字符串拆分为多行数据实例详解
2021/07/16 Oracle
Python内置的数据类型及使用方法
2022/04/13 Python
Zabbix6通过ODBC方式监控Oracle 19C的详细过程
2022/09/23 Servers