1. 程式人生 > >JS實現全屏和退出全屏

JS實現全屏和退出全屏

直接上程式碼:

//innerHTML指的是從物件的起始位置到終止位置的全部內容,包括Html標籤。
//innerText 指的是從起始位置到終止位置的內容,但它去除Html標籤。

<script type="text/javascript">

function FullScreen(el){
var isFullscreen=document.fullScreen||document.mozFullScreen||document.webkitIsFullScreen;
if(!isFullscreen){//進入全屏,多重短路表示式
(el.requestFullscreen&&el.requestFullscreen())||
(el.mozRequestFullScreen&&el.mozRequestFullScreen())||
(el.webkitRequestFullscreen&&el.webkitRequestFullscreen())||(el.msRequestFullscreen&&el.msRequestFullscreen());

}else{ //退出全屏,三目運算子
document.exitFullscreen?document.exitFullscreen():
document.mozCancelFullScreen?document.mozCancelFullScreen():
document.webkitExitFullscreen?document.webkitExitFullscreen():'';
}
}
function toggleFullScreen(e){
var el=e.srcElement||e.target;//target相容Firefox
el.innerHTML=='點我全屏'?el.innerHTML='退出全屏':el.innerHTML='點我全屏';
FullScreen(el);
}
</script>
<button onclick="toggleFullScreen(event)">點我全屏</button>

相關推薦

JS實現HTML中frameset瀏覽器退出

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

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考慮

vue 實現退出的功能

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

Android 正確進入退出的姿勢

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

HTML5實現API【進入退出

現在主流瀏覽器基本上實現了全屏效果,但是不同瀏覽器實現不一樣: 【進入和退出全屏】 // Webkit (works in Safari5.1 and Chrome 15) element.webkitRequestFullScreen(); document.webki

js控制頁面的展示退出顯示的方法

<!DOCTYPE html>  <html>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <body>  <div style="margin:0 aut

JS實現網頁退出

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

js控制進入退出

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

js 控制網頁退出

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

利用js如何做到讓頁面功能

Element.requestFullscreen() 方法用於發出非同步請求使元素進入全屏模式。 以下demo是頁面進行全屏和正常螢幕的,你也可以用元素來進行全屏,當然 <!doctype html> <html> <head>

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 頁面退出, fullScreen

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

js實現復選框的選、全部選反選

item itl true mon 復選框 loading 實現 align inpu 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta chars

div的退出

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

利用js實現複選框的反選

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

JS實現複選框的不選

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <ti

vue實現取消

urn lis put lan model set type itl scale 很簡單使用的vue全選和取消全選 直接上代碼,簡單易懂不懂得可以留言。 <!DOCTYPE html> <html lang="en"> <head>

jQuery js實現checkbox復選框選、不選、反選 PHP

實現 com check set false jquer display value round <!doctype html> <html lang="en"> <head> <meta charset="

js實現圖片(小球)在幕上上下左右移動

tin doctype ctx eight doc itl 左右 idt ext <html> <head> <title>Document</title> </head> <body style