js全屏显示显示代码的三种方法
更新时间：2013年11月11日 16:35:33 作者：
这篇文章介绍了js全屏显示显示代码的三种方法，有需要的朋友可以参考一下
第一种：
在已经打开的一个普通网页上，点击“全屏显示”，然后进入该网页对应的全屏模式。方法为：在网页的<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>
在已经打开的一个普通网页上，点击“全屏显示”，然后进入该网页对应的全屏模式。方法为：在网页的<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实现滚动加载更多，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
这篇文章主要为大家详细介绍了如何利用JavaScript实现两个跨域页面实现量子纠缠互动效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
这篇文章主要为大家详细介绍了原生js实现公告滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要介绍了详解微信小程序——自定义圆形进度条，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2016-12-12
这篇文章主要介绍了JS搜狐面试题,涉及javascript数组、字符串及面向对象程序设计相关技巧,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了ES6中Array.includes()函数的用法,需要的朋友可以参考下2017-09-09
这篇文章主要介绍了JavaScript检测鼠标移动方向的方法,涉及javascript鼠标操作的相关技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了JS实现的RC4加密算法,结合实例形式分析基于javascript实现的RC4加密算法简单定义与使用方法,需要的朋友可以参考下2018-08-08
这篇文章主要介绍了微信小程序模板消息限制实现无限制主动推送的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要介绍了JS如何操作DOM基于表格动态展示数据,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-10-10
最新评论