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 相关文章推荐
JQuery 自定义CircleAnimation,Animate方法学习笔记
Jul 10 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
用JavaScript实现对话框的教程
Jun 04 Javascript
全面解析Bootstrap弹窗的实现方法
Dec 01 Javascript
Zepto实现密码的隐藏/显示
Apr 07 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
JS点击动态添加标签、删除指定标签的代码
Apr 18 Javascript
js控制随机数生成概率代码实例
Mar 21 Javascript
node实现socket链接与GPRS进行通信的方法
May 20 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 13 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调用c接口无错版介绍
2014/03/11 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
IE中createElement需要注意的一个问题
2010/07/13 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
如何使用jQuery来处理图片坏链具体实现步骤
2013/05/02 Javascript
javascript动态修改Li节点值的方法
2015/01/20 Javascript
vue后台管理之动态加载路由的方法
2018/08/13 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
在Web关闭页面时发送Ajax请求的实现方法
2019/03/07 Javascript
使用 Element UI Table 的 slot-scope方法
2019/10/10 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
Vue自定义组件的四种方式示例详解
2020/02/28 Javascript
JavaScript碰撞检测原理及其实现代码
2020/03/12 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
2020/10/29 Javascript
pyqt4教程之widget使用示例分享
2014/03/07 Python
Python解析并读取PDF文件内容的方法
2018/05/08 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
详解python实现小波变换的一个简单例子
2019/07/18 Python
python jenkins 打包构建代码的示例代码
2019/11/29 Python
python新手学习使用库
2020/06/11 Python
Python实现画图软件功能方法详解
2020/07/28 Python
白宫黑市官网:White House Black Market
2016/11/17 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
应届生体育教师自荐信
2013/10/03 职场文书
工作表现评语
2014/01/19 职场文书
一年级学生评语
2014/04/23 职场文书
同意迁入证明模板
2014/10/26 职场文书
重阳节简报
2015/07/20 职场文书
新闻通讯稿模板
2015/07/22 职场文书
2016年精神文明建设先进个人事迹材料
2016/02/29 职场文书
Python基础之hashlib模块详解
2021/05/06 Python
Vue3中的Refs和Ref详情
2021/11/11 Vue.js
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers