JavaScript实现网页全屏显示的三种方法及退出策略

JavaScript实现网页全屏显示的三种方法及退出策略

第一种方法：

在已打开的普通网页中，点击“全屏显示”按钮即可进入该网页的全屏模式。具体实现是在网页的<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">在新窗口打开，或利用上述全屏方法的逆操作。然而，无论采用何种方式，从全屏切换回普通模式时，系统通常会重新打开一个窗口，导致如播放电影等场景需重新加载，体验不佳。目前参考CSDN帖子（http://topic.csdn.net/t/20021028/12/1130882.html）5楼回复的方法，虽不严格称为全屏，但通过将窗口向上平移一定高度并允许拖动窗口，效果尚可。具体代码如下：

<%@ 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>