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 相关文章推荐
IE6/7/8中Option元素未设value时Select将获取空字符串
Apr 07 Javascript
js和as的稳定传值问题解决
Jul 14 Javascript
javascript时间函数大全
Jun 30 Javascript
jQuery操作DOM之获取表单控件的值
Jan 23 Javascript
使用canvas实现仿新浪微博头像截取上传功能
Sep 02 Javascript
Javascript HTML5 Canvas实现的一个画板
Apr 12 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
React 组件间的通信示例
Jun 14 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
一定要知道的 25 个 Vue 技巧
Nov 02 Vue.js
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
新52大事件
2020/03/03 欧美动漫
单位速度在实战中的运用
2020/03/04 星际争霸
五款PHP代码重构工具推荐
2014/10/14 PHP
实现PHP中session存储及删除变量
2018/10/15 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
一个简单的javascript类定义例子
2009/09/12 Javascript
jQuery 跨域访问问题解决方法
2009/12/02 Javascript
jQuery 连续列表实现代码
2009/12/21 Javascript
关于js datetime的那点事
2011/11/15 Javascript
javaScript 删除字符串空格多种方法小结
2012/10/24 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
js 自定义个性下拉选择框示例
2013/08/20 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
详解基于vue-cli配置移动端自适应
2018/01/13 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
浅谈如何使用webpack构建多页面应用
2018/05/30 Javascript
jQuery AJAX与jQuery事件的分析讲解
2019/02/18 jQuery
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
python使用__slots__让你的代码更加节省内存
2018/09/05 Python
python把ipynb文件转换成pdf文件过程详解
2019/07/09 Python
python3应用windows api对后台程序窗口及桌面截图并保存的方法
2019/08/27 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
Python matplotlib修改默认字体的操作
2020/03/05 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
2020/05/14 HTML / CSS
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
办公室助理岗位职责
2013/12/25 职场文书
韩国商务邀请函
2014/01/14 职场文书
法人代表授权委托书
2014/04/08 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
基于Python实现一个春节倒计时脚本
2022/01/22 Python