Bagaimana saya bisa membuat pengunjung's browser pergi fullscreen menggunakan JavaScript, dengan cara yang bekerja dengan IE, Firefox dan Opera?
Baru di browser seperti Chrome 15, Firefox 10, Safari 5.1, IE 10 ini adalah mungkin. It's juga mungkin untuk yang lebih tua YAITU's melalui ActiveX tergantung pada pengaturan browser mereka.
Berikut ini's bagaimana untuk melakukannya:
function requestFullScreen(element) {
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
var elem = document.body; // Make the body go full screen.
requestFullScreen(elem);
Pengguna jelas kebutuhan untuk menerima fullscreen permintaan pertama, dan ada adalah tidak mungkin untuk memicu secara otomatis pada pageload, perlu dipicu oleh pengguna (misalnya. sebuah tombol)
Baca lebih lanjut: https://developer.mozilla.org/en/DOM/Using_full-screen_mode
Kode ini juga mencakup cara mengaktifkan layar penuh untuk Internet Explorer 9, dan mungkin versi lama, serta sangat versi terbaru dari Google Chrome. Jawaban yang diterima juga dapat digunakan untuk browser lainnya.
var el = document.documentElement
, rfs = // for newer Webkit and Firefox
el.requestFullscreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen
;
if(typeof rfs!="undefined" && rfs){
rfs.call(el);
} else if(typeof window.ActiveXObject!="undefined"){
// for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript!=null) {
wscript.SendKeys("{F11}");
}
}
Sumber:
requestFullscreen
"hanya bekerja selama", "[m]ost UIEvents dan MouseEvents, seperti klik dan keydown, dll.", "sehingga tidak dapat digunakan jahat".)Ini sedekat anda bisa mendapatkan ke layar penuh di dalam JavaScript:
<script type="text/javascript">
window.onload = maxWindow;
function maxWindow() {
window.moveTo(0, 0);
if (document.all) {
top.window.resizeTo(screen.availWidth, screen.availHeight);
}
else if (document.layers || document.getElementById) {
if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
}
</script>
Berikut ini adalah solusi lengkap untuk masuk dan keluar dari modus layar penuh (alias batal, keluar, melarikan diri)
function cancelFullScreen(el) {
var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen;
if (requestMethod) { // cancel full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
function requestFullScreen(el) {
// Supports most browsers and their versions.
var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
if (requestMethod) { // Native full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
return false
}
function toggleFull() {
var elem = document.body; // Make the body go full screen.
var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) || (document.mozFullScreen || document.webkitIsFullScreen);
if (isInFullScreen) {
cancelFullScreen(document);
} else {
requestFullScreen(elem);
}
return false;
}
Anda dapat menggunakan fullscreen API Anda bisa lihat contoh
fullscreen API menyediakan cara yang mudah untuk konten web untuk disajikan dengan menggunakan user's seluruh layar. Artikel ini memberikan informasi tentang menggunakan API ini.
baru teknologi html5 – fullscreen API memberi kita cara mudah untuk menyajikan konten halaman web dalam modus layar penuh. Kami untuk memberikan tentang anda informasi rinci tentang mode fullscreen. Hanya mencoba untuk bayangkan tentang semua kemungkinan keuntungan yang bisa anda dapatkan dengan menggunakan ini teknologi – full-screen album foto, video, dan bahkan game.
Tapi sebelum kami jelaskan teknologi baru ini, saya harus dicatat bahwa teknologi ini adalah eksperimental, dan didukung oleh semua Browser utama.
Anda dapat menemukan tutorial lengkap berikut ini : http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/
Berikut ini adalah Demo kerja : http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm
I've digunakan ini...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
function fullScreen(theURL) {
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto');
}
// End -->
</script>
</head>
<body>
<h1 style="text-align: center;">
Open In Full Screen
</h1>
<div style="text-align: center;"><br>
<a href="javascript:void(0);" onclick="fullScreen('http://google.com');">
Open Full Screen Window
</a>
</div>
</body>
</html>
Contoh sederhana dari: http://www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capabilities/
<script type="text/javascript">
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
}
</script>
<img class="video_player" src="image.jpg" id="player"></img>
<button onclick="goFullscreen('player'); return false">Click Me To Go Fullscreen! (For real)</button>
Membuat Fungsi
function toggleFullScreen() {
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
$scope.topMenuData.showSmall = true;
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);
}
} else {
$scope.topMenuData.showSmall = false;
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
Dalam Html Masukan Kode seperti
<ul class="unstyled-list fg-white">
<li class="place-right" data-ng-if="!topMenuData.showSmall" data-ng-click="toggleFullScreen()">Full Screen</li>
<li class="place-right" data-ng-if="topMenuData.showSmall" data-ng-click="toggleFullScreen()">Back</li>
</ul>
Untungnya untuk tidak curiga pengguna web ini tidak dapat dilakukan hanya dengan javascript. Anda akan perlu untuk menulis browser plugin tertentu, jika mereka didn't sudah ada, dan kemudian entah bagaimana mendapatkan orang-orang untuk men-download mereka. Yang paling dekat anda bisa mendapatkan lebih dimaksimalkan jendela dengan tidak ada alat atau navigasi bar tetapi pengguna masih akan dapat melihat url.
window.terbuka('http://www.web-page.com', 'judul' , 'type=fullWindow, fullscreen, scrollbars=yes');">
Hal ini umumnya dianggap sebagai praktek yang buruk sekalipun karena menghilangkan banyak fungsi browser dari pengguna.
Sekarang bahwa layar penuh Api yang lebih luas dan muncul untuk menjadi jatuh tempo, mengapa tidak mencoba Screenfull.js? Aku digunakan untuk pertama kalinya kemarin dan hari ini aplikasi kami benar-benar pergi layar penuh di (hampir) semua browser!
Pastikan untuk pasangan dengan the :fullscreen
pseudo-class dalam CSS. Lihat https://www.sitepoint.com/use-html5-full-screen-api/ untuk lebih lanjut.
Mencoba screenfull.js. It's nice cross-browser solusi yang harus bekerja untuk Opera browser juga.
pembungkus Sederhana untuk cross-browser penggunaan JavaScript Fullscreen API, yang memungkinkan anda membawa halaman atau setiap elemen menjadi fullscreen. Menghaluskan browser implementasi perbedaan, sehingga anda don't harus.
Demo.
Hal ini dapat mendukung
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="PRODUCTION_Default5" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function max()
{
window.open("", "_self", "fullscreen=yes, scrollbars=auto");
}
</script>
</head>
<body onload="max()">
<form id="form1" runat="server">
<div>
This is Test Page
</div>
</form>
</body>
</html>
Coba script ini
<script language="JavaScript">
function fullScreen(theURL) {
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto' );
}
</script>
Untuk menelepon dari script menggunakan kode ini,
window.fullScreen('fullscreen.jsp');
atau dengan menggunakan hyperlink
<a href="javascript:void(0);" onclick="fullScreen('fullscreen.jsp');">
Open in Full Screen Window</a>
Dapat anda Coba:
<script type="text/javascript">
function go_full_screen(){
var elem = document.documentElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
}
</script>
<a href="#" onClick="go_full_screen();">Full Screen / Compress Screen</a>
Berikut adalah solusi lengkap untuk Full Screen
dan Keluar dari Layar Penuh
baik (banyak terima kasih untuk bantuan dari tower's jawaban di atas):
$(document).ready(function(){
$.is_fs = false;
$.requestFullScreen = function(calr)
{
var element = document.body;
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
$.is_fs = true;
$(calr).val('Exit Full Screen');
}
$.cancel_fs = function(calr)
{
var element = document; //and NOT document.body!!
var requestMethod = element.exitFullScreen || element.mozCancelFullScreen || element.webkitExitFullScreen || element.mozExitFullScreen || element.msExitFullScreen || element.webkitCancelFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
$(calr).val('Full Screen');
$.is_fs = false;
}
$.toggleFS = function(calr)
{
$.is_fs == true? $.cancel_fs(calr):$.requestFullScreen(calr);
}
});
// MEMANGGIL:
<input type="button" value="Full Screen" onclick="$.toggleFS(this);" />
Ini akan bekerja untuk menampilkan jendela anda dalam layar penuh
Catatan: Untuk ini untuk bekerja, anda perlu Query dari http://code.jquery.com/jquery-2.1.1.min.js
Atau membuat memiliki javascript link seperti ini.
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="demo-element">
<span>Full Screen Mode Disabled</span>
<button id="go-button">Enable Full Screen</button>
</div>
<script>
function GoInFullscreen(element) {
if(element.requestFullscreen)
element.requestFullscreen();
else if(element.mozRequestFullScreen)
element.mozRequestFullScreen();
else if(element.webkitRequestFullscreen)
element.webkitRequestFullscreen();
else if(element.msRequestFullscreen)
element.msRequestFullscreen();
}
function GoOutFullscreen() {
if(document.exitFullscreen)
document.exitFullscreen();
else if(document.mozCancelFullScreen)
document.mozCancelFullScreen();
else if(document.webkitExitFullscreen)
document.webkitExitFullscreen();
else if(document.msExitFullscreen)
document.msExitFullscreen();
}
function IsFullScreenCurrently() {
var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;
if(full_screen_element === null)
return false;
else
return true;
}
$("#go-button").on('click', function() {
if(IsFullScreenCurrently())
GoOutFullscreen();
else
GoInFullscreen($("#demo-element").get(0));
});
$(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
if(IsFullScreenCurrently()) {
$("#demo-element span").text('Full Screen Mode Enabled');
$("#go-button").text('Disable Full Screen');
}
else {
$("#demo-element span").text('Full Screen Mode Disabled');
$("#go-button").text('Enable Full Screen');
}
});</script>
Q&D-cara untuk full screen, jika anda berada di "kios" situasi, adalah untuk memberi makan F11 untuk jendela browser setelah itu's dan berjalan. Ini tidak cukup memulai dan pengguna mungkin bisa menyodok layar sentuh di bagian atas dan dapatkan semi-full-screen view, tapi makan F11 mungkin dilakukan dalam keadaan darurat atau hanya untuk memulai sebuah proyek.