4

我想在我的 HTML 文档中有一个 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>

任何想法将不胜感激。

干杯!

4

1 回答 1

0

Check out the Fullscreen API. http://www.sitepoint.com/html5-full-screen-api/

It's not widely supported, though. http://caniuse.com/fullscreen

于 2013-10-17T23:35:23.810 回答