js全屏顯示顯示代碼的三種方法

更新時間：2013年11月11日 16:35:33 作者：

這篇文章介紹了js全屏顯示顯示代碼的三種方法，有需要的朋友可以參考一下

第一種：
在已經(jīng)打開的一個普通網(wǎng)頁上，點擊“全屏顯示”，然后進入該網(wǎng)頁對應的全屏模式。方法為：在網(wǎng)頁的<body>與</body>之間加入以下代碼：

<form>
<input type="BUTTON" name="FullScreen" value="全屏顯示" onClick="window.open(document.location, 'big', 'fullscreen=yes')">
 </form>
 

如果全屏顯示的不是本頁，則只需要把document.location換為對應的網(wǎng)址即可，即如下代碼：

復制代碼代碼如下:

<form>
<input type=BUTTON name=FullScreen value=全屏顯示 onClick="window.open('URL地址','big','fullscreen=yes')">
 </form>
 

第二種：
在運行一個網(wǎng)頁時，比如你在網(wǎng)址欄里直接輸入：http://localhost:8080/temp.jsp，此時關閉該網(wǎng)頁，同時顯示一個空白的全屏網(wǎng)頁，方法為：在body里寫如下代碼：

復制代碼代碼如下:

<body onload=window.open('','',fullscreen=1);opener=null;window.close()>
</body>

第三種：
其實就是以上兩種的疊加，一般這種情況也用的比較多。就是直接打開一個網(wǎng)頁的時候，就進入它的全屏模式，這種情況就和第一種不同了，因為第一種，當你點擊了“全屏顯示”按鈕后，它是新打開一個全屏的網(wǎng)頁，但是原來普通的那個網(wǎng)頁仍然有，所以，這個就比較好一些。方法為：建立兩個jsp文件，第一個里只運行如下代碼，比如名字叫demo.jsp；第二個則是你實際要運行的內(nèi)容，比如叫：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>
這里就是我的全屏內(nèi)容，再看看原來我們在地址欄里輸入的demo.jsp，是不是關閉了？OK，搞定！
</body>
</html>

退出全屏
--------------------------------------------------------------------------------------------------------------------------------------------------------------------

對于退出全屏，我上網(wǎng)也搜過很多資料，總體來說，都很難達到我們期望的目標，比如：我們可以加一個超鏈接 <a href="" target="_blank">在新窗口打開；也可以應用上面打開全屏的方法的逆方法來做。但是，無論怎么搞，最后從全屏往普通模式切換的時候，總是相當于重新打開一個窗口，這樣，加入我們原來的全屏模式正在放電影，你如果切換一下成普通模式，就得重新加載，這肯定不行。但是，沒辦法，我現(xiàn)在就參看這篇帖子里的5樓的回復：http://topic.csdn.net/t/20021028/12/1130882.html，就這個方法，大致上還過的去，只不過，它這個方法不叫全屏，相當于是把窗口向上平移了一定得高度，我們?nèi)匀豢梢酝蟿哟翱?。代碼如下：

復制代碼代碼如下:

<%@ 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()">

關閉頁面
--------------------------------------------------------------------------------------------------------------------------------------------------------------------

如果要關閉頁面，那么只需要在頁面中加上這么一個超鏈接即可：

復制代碼代碼如下:

您可能感興趣的文章: