1. 程式人生 > >JS實現網頁全屏與退出全屏

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

$('#alarm-fullscreen-toggler').on('click', function(e) {
		var element = document.documentElement;
		if (!$('body').hasClass("full-screen")) {
			$('body').addClass("full-screen");
			$('#alarm-fullscreen-toggler').addClass("active");
			if (element.requestFullscreen) {
				element.requestFullscreen();
			} else if (element.mozRequestFullScreen) {
				element.mozRequestFullScreen();
			} else if (element.webkitRequestFullscreen) {
				element.webkitRequestFullscreen();
			} else if (element.msRequestFullscreen) {
				element.msRequestFullscreen();
			}

		} else {
			$('body').removeClass("full-screen");
			$('#alarm-fullscreen-toggler').removeClass("active");
			if (document.exitFullscreen) {
				document.exitFullscreen();
			} else if (document.mozCancelFullScreen) {
				document.mozCancelFullScreen();
			} else if (document.webkitCancelFullScreen) {
				document.webkitCancelFullScreen();
			} else if (document.msExitFullscreen) {
				document.msExitFullscreen();
			}

		}
	});

全屏方法1:

var el = document.documentElement;
    var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen;
    if (typeof rfs != "undefined" && rfs) {
        rfs.call(el);
    } else if (typeof window.ActiveXObject != "undefined") {
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }

全屏方法2:

var docElm = document.documentElement;
    //W3C  
    if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
    }
        //FireFox  
    else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
    }
        //Chrome等  
    else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
    }
        //IE11
    else if (elem.msRequestFullscreen) {
        elem.msRequestFullscreen();
    }

退出全屏:

    if (document.exitFullscreen) {
        document.exitFullscreen();
    }
    else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
    }
    else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
    }
    else if (document.msExitFullscreen) {
        document.msExitFullscreen();
    }

相關推薦

JS實現網頁退出

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

div的退出

.html ner class 方法 播放器 get ont show func div的全屏與退出全屏 作用:將div全屏與退出全屏,一般播放器使用較多。 html按鈕: <button onclick="showFull();">

手機影音第九天,控制視頻播放退出播放,音量調節按鈕來控制視頻音量靜音的實現

視頻的全屏播放 音量變化與靜音 代碼以托管到碼雲,有興趣的小夥伴可以下載看看 https://git.oschina.net/joy_yuan/MobilePlayer一、視頻全屏播放與退出全屏 系統默認的videoview類,沒有調整大小的方法,因此需要自定義一個類,繼承vide

QT中關於視窗顯示退出實現

QT中關於視窗全屏顯示與退出全屏的實現 近期在學習QT時遇到了很多問題這也是其中一個,個人通過在各種書籍和網路上的查閱找到了一些關於這方面的答案,希望能給大家一些幫助。 首先,在QT中對於視窗顯示常用的有這麼幾個方法可以呼叫: Qt全屏顯示函式   &nb

JS實現HTML中frameset瀏覽器退出

<script type="text/javascript"> /* 全屏 */ function fullScreen() { var el = document.documentElement

js 控制網頁退出

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

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實現退出

直接上程式碼: //innerHTML指的是從物件的起始位置到終止位置的全部內容,包括Html標籤。//innerText 指的是從起始位置到終止位置的內容,但它去除Html標籤。 <script type="text/javascript"> function FullScreen(el)

JS實現瀏覽器退出

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

js實現網頁切換(平滑過渡),滑鼠滾動切換

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

vue 實現退出的功能

<span class="icon-contain" @click="getFullCreeen"> <svg-icon icon-class="quanping" /> </span> JS export default {

js控制進入退出

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

pdf.js使用和JS實現巢狀Iframe頁面F11效果

1      Pdf.js使用 generic/web/viewer.html主要是渲染pdf閱讀器的樣式,而generic/web/viewer.js則是指定開啟的pdf檔案(當然還有其他功能,不過這些都不是我們關心的),我們看位於generic/web/viewer.j

Html+JS實現選操作

看書:<input type="checkbox" name="checkbox" value=1><br> 寫字:<input type="checkbox" name="checkbox"value=2><br>

js 頁面退出, fullScreen

專案有個需求,當點選開啟一個新頁面的時候需要該頁面全屏(類似F11鍵功能),查詢之後發現沒辦法直接用js來觸發全屏,只能通過使用者滑鼠、鍵盤等事件中才能觸發,即“對於一些非使用者事件,比如onload、

H5 video取消相容

H5 video全屏與取消全屏各瀏覽器相容 // 全屏 // ele:全屏的物件 function requestFullscreen(ele) { // 全屏相容程式碼 if (ele.requestFullscreen) { ele.requestFullscre

利用js實現多行文字框的

<!DOCTYPE html> <html> <head>     <title>139</title>     <meta charset="utf-8">     <script type="t

Android 正確進入退出的姿勢

進入全屏 private void hideSystemUI() { getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_FULLSCREEN | View.SYSTEM_UI

js取消

實現全選與取消全選的效果 要求1(將軍影響士兵):點選全選按鈕,下面的複選框全部選中,取消全選按鈕,下面的複選框全部取消 思路:複選框是否被選中,取決於check屬性,將全選按鈕的check屬性值賦值給下面所有複選框的check值 要求2(士兵影響將軍): 當下面的某個複選框沒有被選中時,全選按鈕自動變為沒被

使用js實現網頁驗證碼

btn post back html pan put mat control log 簡單易用,無需後臺程序。 HTML <div class="login-box-body"> <p class="login-bo