javascript/jquery onClick使瀏覽器全屏

Question

我正在尋找一種創建按鈕的方式，點擊它時瀏覽器應該全屏顯示。 *這應該是按鈕。

請任何想法！

我發現這個類似的帖子，我想這是解決方案！ onclick go full screen但後來生病回來，希望有人有新的解決方案！

Answer 1

你不行。無法自動全屏顯示。相反，您可以指示/請求您的用戶按F11手動全屏顯示，但它應該是可選的。

Answer 2

在這裏，我發現，它的作品，但不能確定跨瀏覽器的支持！

<div id="specialstuff" style="display: none;"> 
    </p><p>Status: <span id="fsstatus" class="fullScreenSupported">Back to normal</span></p> 
</div> 
<input type="button" value="Go Fullscreen" id="fsbutton"> 

<script> 

/* 
Native FullScreen JavaScript API 
------------- 
Assumes Mozilla naming conventions instead of W3C for now 
*/ 

(function() { 
    var 
     fullScreenApi = { 
      supportsFullScreen: false, 
      isFullScreen: function() { return false; }, 
      requestFullScreen: function() {}, 
      cancelFullScreen: function() {}, 
      fullScreenEventName: '', 
      prefix: '' 
     }, 
     browserPrefixes = 'webkit moz o ms khtml'.split(' '); 

    // check for native support 
    if (typeof document.cancelFullScreen != 'undefined') { 
     fullScreenApi.supportsFullScreen = true; 
    } else {  
     // check for fullscreen support by vendor prefix 
     for (var i = 0, il = browserPrefixes.length; i < il; i++) { 
      fullScreenApi.prefix = browserPrefixes[i]; 

      if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined') { 
       fullScreenApi.supportsFullScreen = true; 

       break; 
      } 
     } 
    } 

    // update methods to do something useful 
    if (fullScreenApi.supportsFullScreen) { 
     fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange'; 

     fullScreenApi.isFullScreen = function() { 
      switch (this.prefix) { 
       case '': 
        return document.fullScreen; 
       case 'webkit': 
        return document.webkitIsFullScreen; 
       default: 
        return document[this.prefix + 'FullScreen']; 
      } 
     } 
     fullScreenApi.requestFullScreen = function(el) { 
      return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen'](); 
     } 
     fullScreenApi.cancelFullScreen = function(el) { 
      return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen'](); 
     }  
    } 

    // jQuery plugin 
    if (typeof jQuery != 'undefined') { 
     jQuery.fn.requestFullScreen = function() { 

      return this.each(function() { 
       var el = jQuery(this); 
       if (fullScreenApi.supportsFullScreen) { 
        fullScreenApi.requestFullScreen(el); 
       } 
      }); 
     }; 
    } 

    // export api 
    window.fullScreenApi = fullScreenApi; 
})(); 

</script> 

<script> 

// do something interesting with fullscreen support 
var fsButton = document.getElementById('fsbutton'), 
    fsElement = document.getElementById('specialstuff'), 
    fsStatus = document.getElementById('fsstatus'); 


if (window.fullScreenApi.supportsFullScreen) { 
    fsStatus.innerHTML = 'YES: Your browser supports FullScreen'; 
    fsStatus.className = 'fullScreenSupported'; 

    // handle button click 
    fsButton.addEventListener('click', function() { 
     window.fullScreenApi.requestFullScreen(fsElement); 
    }, true); 

    fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() { 
     if (fullScreenApi.isFullScreen()) { 
      fsStatus.innerHTML = 'Whoa, you went fullscreen'; 
     } else { 
      fsStatus.innerHTML = 'Back to normal'; 
     } 
    }, true); 

} else { 
    fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen'; 
} 

</script>