2013-10-17 60 views
4

我想在我的HTML文檔中有一個javascript函數,當網頁打開時它可以直接打開到全屏。當頁面加載時打開全屏顯示的javascript函數

我已經找到一種方法去全屏按鈕時這裏切換:

<!DOCTYPE html>

<html>

<head>

<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">

<title>True Fullscreen in Processing.js demo</title>

<script src="processing-1.4.1.min.js"></script>

<script type="text/processing" data-processing-target="canv">

`//put processing sketch between here` 

int red = 209; 
int green = 0; 
int blue = 129; 

void setup() { 
    //size(1000, 480); 
} 

void draw() { 

    //background(200,0,129); 
    background(red, green, blue); 

} 

//and here 

// There's probably a better way to do this, but... 
// putting this javascript function in the processing sketch lets 
// the sketch's values for width and height get updated on resize. 
window.onresize = function() { 
    // "canv" is the canvas displaying the Processing program. 
    // Make it fill the screen, or the browser window with no sliders: 
    var canvElem = document.getElementById("canv"); 
    var newWidth = document.documentElement.clientWidth; 
    var newHeight = document.documentElement.clientHeight; 
    canvElem.style.position = "fixed"; 
    canvElem.setAttribute("width", newWidth); 
    canvElem.setAttribute("height", newHeight); 
    canvElem.style.top = 0 + "px"; 
    canvElem.style.left = 0 + "px"; 
    // size() is Processing, everything else 
    // in this function is javascript 
    size(newWidth, newHeight); 

} 

</script>

<canvas id="canv">(A Processing sketch should be running right here, but, sadly, your browser does not support the HTML5 canvas tag. Try Firefox or Safari.)</canvas>

<button onclick="toggleFullScreen()">Try it</button>

<script type="text/javascript">

`//window.onload = function() { //doesn't work` 

//$(function() { //doesn't work 

function toggleFullScreen() { 

    if ((document.fullscreenElement && document.fullscreenElement !== null) || // alternative standard method 
    (!document.mozFullScreenElement && !document.webkitFullscreenElement)) { // current working methods 
     if (document.documentElement.requestFullscreen) { 
      document.documentElement.requestFullscreen(); 
     } else if (document.documentElement.mozRequestFullScreen) { 
      document.documentElement.mozRequestFullScreen(); 
     } else if (document.documentElement.webkitRequestFullscreen) { 
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); 
     } 
    } 
} 

</script>

</body>

</html>

任何想法,將不勝感激。

乾杯!

+0

瀏覽器阻止您在沒有用戶交互的情況下進入全屏。想象一下,如果你去一個網站,它會自動進入全屏狀態,這是多麼令人討厭。 – Ibu

回答

相關問題