js全螢幕顯示顯示代碼

來源:互聯網
上載者:User

第一種:

       在已經開啟的一個普通網頁上,點擊“全螢幕顯示”,然後進入該網頁對應的全螢幕模式。方法為:在網頁的<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>

作者“yanghuidang”
 

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.