JS控制網頁全屏

阿新 • • 發佈：2019-01-12

在谷歌，IE等瀏覽器中，點選F11按鍵會進入網頁全屏模式，如同看電影的劇場模式，這個在程式碼中可以通過JS來實現，簡單說下在實現這個需求後的個人總結：
底層網頁是已經載入完畢的，這時我們需要的全屏其實就是對底層網頁的放大處理，所以採用這種方式來做成全屏效果，你的前提是有底層的網頁dom,然後對這個dom進行全屏處理。

程式碼：

<body>
    <button id='btn'>進入全屏</button>  
    <!-- 對這個div 進行全屏處理 
         一開始對全屏處理的dom進行隱藏(display: none;)，不隱藏也是可以的，看個人需求
    --> 

    <div id="content" style="background:#333;width:100%;height:100%;display: none;"> 
        <div id="quite" class="btn"><span style="color:#FFF">退出全屏</span></div>  
    </div>  
</body>
<script type="text/javascript">
    var content = document.getElementById('content' 
);  
    $("#btn").click(function(){  
        //全屏處理前，將隱藏dom秀出來
        $("#content").show();
        fullScreen(content);  
    });

    var quite = document.getElementById('quite'); 
    $("#quite").click(function(){  
        exitFullScreen();
        //隱藏dom
        $("#content").hide();
    }); 


    //進入全屏 

    function fullScreen(el) {  
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,  
            wscript;  

        if(typeof rfs != "undefined" && rfs) {  ////////
            rfs.call(el);  
            return;  
        } 

        if(typeof window.ActiveXObject != "undefined") {  
            wscript = new ActiveXObject("WScript.Shell");  
            if(wscript) {  
                wscript.SendKeys("{F11}");  
            }  
        }  
    }  

    //退出全屏
    function exitFullScreen() {  
        var el= document,  
            cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,  
            wscript;  

        if (typeof cfs != "undefined" && cfs) {  
          cfs.call(el);  
          return;  
        }  

        if (typeof window.ActiveXObject != "undefined") {  
            wscript = new ActiveXObject("WScript.Shell");  
            if (wscript != null) {  
                wscript.SendKeys("{F11}");  
            }  
      }  
    }   
 </script>

文章不足之處，望提出，謝謝..

js 控制網頁全屏及退出全屏

網上找了好多資料，基本大同小異，實際效果會出現IE不相容的現象（全屏和退出全屏都失效），後來解決了，記錄如下：function requestFullScreen(element) { var

JS控制網頁全屏

在谷歌，IE等瀏覽器中，點選F11按鍵會進入網頁全屏模式，如同看電影的劇場模式，這個在程式碼中可以通過JS來實現，簡單說下在實現這個需求後的個人總結：底層網頁是已經載入完畢的，這時我們需要的全屏其實

JS 控制網頁全屏或退出全屏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w

js控制瀏覽器全屏

man trigge ros event object 屬性 pad 一次運行 HTML 5中的full screen，目前可以在除IE和opera外的瀏覽器中使用，有的時候用來做全屏API，遊戲呀，等都很有用。先看常見的API element.requestFull

用js控制進入全屏，退出全屏

需求是這樣的，有一個圖示元素，點選後進入全屏，再次點選退出全屏。實現程式碼： <li id="fullscreen"><a href="#" ><span cl

JS實現網頁全屏與退出全屏

$('#alarm-fullscreen-toggler').on('click', function(e) { var element = document.documentElement; if (!$('body').hasClass("full-screen")) { $('body'

js實現網頁全屏切換（平滑過渡），滑鼠滾動切換

實現效果為頁面平滑過渡全屏切換，點選導航和滑鼠滾動都可以切換。效果圖：程式碼： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

js控制網頁視窗一開啟就自動全屏

1、如果不需要開新視窗在body區加入： <body onLoad= "javascript:window.resizeTo(screen.availWidth,screen.availHeight);window.moveTo(0,0) "> 2

jQuery全屏滾動外掛fullPage.js/可製作全屏滾動網頁

fullPage.js 是 jQuery 的一個外掛，主要功能是製作出全屏網站 fullPage外掛的相容性是相容IE7瀏覽器往上其餘主流瀏覽器就不描敘了 fullpage外掛支援以下操作 1、外掛可以使用滑鼠滑輪進行滾動 2、當豎屏的時候支援鍵盤的上下箭頭滾動橫屏對照可以使用的是左

[轉] JavaScript控制瀏覽器全屏及各種瀏覽器全屏模式的方法、屬性和事件

script ati 保持 num adding html5 美國 bre art [From] http://www.jb51.net/article/76695.htm HTML 5中的full screen，目前可以在除IE和opera外的瀏覽器中使用，有的時候

js讓頁面全屏

ram code oct 有一個 type 擁有 chan 頁面文檔概述意外的發現一個網頁有一個按鈕能使網頁全屏，查了下代碼發現是H5的全屏api，於是就查了下資料，記錄下來供以後開發時參考，相信對其他人也有用。參考資料：利用js如何做到讓頁面全屏和不全屏功能 E

js實現視窗全屏示例

前言該 demo 包含全屏事件、退出全屏事件以及螢幕狀態改變的鉤子函式的封裝以下是一個完整示例，只需整體拷貝下來執行即可(注意引入了 jquery) 請在這裡檢視示例☞ fullscreen示例示例 <!DOCTYPE html> <html

網頁全屏模式輕鬆掌握[區域性元素全屏展示]

我第一次對網頁全屏模式有概念，是那種網頁播放視訊的全屏播放的那種。感覺很強，前幾個星期有個需求也是關於全屏模式的，接觸之後才知道全屏模式並不神祕，是個很容易掌握的技能... 部落格、前端積累文件、公眾號、GitHub CodePen Demo 地址：演示、code 進去看看，玩一下，本文將

js 彈出全屏窗效果

下面分別是css程式碼，div程式碼和js程式碼，多動手，進步就大，下面的程式碼需要自己分別把程式碼複製到你的程式碼中，可以先放到一個html檔案中看下效果，哪果可以用的話可以複製過去，如果有些出入的話，可以修改下再複製過去，如果不合適的話就報歉了，不過可以瞭解下原理，其中主要用到的是 va

用html5 js實現瀏覽器全屏

專案中需要將後臺瀏覽器的視窗全屏，也就是我們點選一個按鈕要實現按F11全屏的效果。在HTML5中,W3C制定了關於全屏的API，就可以實現全螢幕的效果，也可以讓頁面中的圖片，視訊等全屏目前只有google chrome 15 +, safri5.1+,firfox10+,IE11支援全屏 1

ocx控制元件全屏方法

//ocx ::SetParent(hWnd, GetDesktopWindow()); //hWnd 為你的窗體控制代碼。 int width = ::GetSystemMetrics(SM_CXSCREEN); int he

js 連線開啟全屏新頁面

window.open ('<%=path %>/index.jsp', 'page', 'top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no, fullscreen=

JS實現瀏覽器全屏和退出全屏

測試環境：【作業系統】： win7 64位【IE】：IE9 【FireFox】： FireFox 29 【Chrome】： Chrome 34 眾所周知，IE是個奇葩的瀏覽器，但是由於使用者量很大，開發者還是不得不為IE考慮

js控制checkbox 全選

一個checkbox複選框，控制當前頁面其他複選框是否全選。先看jsp程式碼： <form id="myForm"> <input type="checkbox" onclick='chkall("myForm",this)'>全部

微信網頁全屏實現

/* 螢幕 */ function Screen() { //自動調整 this.resize = function (type, num) { var setFontSize = function () {

JS控制網頁全屏

相關推薦