Cum pot face un vizitator's browser-ul merge pe tot ecranul, folosind JavaScript, într-un mod care funcționează cu IE, Firefox si Opera?
În noile browsere, cum ar fi Chrome 15, Firefox 10, Safari 5.1, ADICĂ 10 acest lucru este posibil. L's, de asemenea, posibil pentru vârstă IE's prin ActiveX, în funcție de setările browser-ului lor.
Aici's cum se face:
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);
Utilizatorul are nevoie, desigur, să accepte fullscreen cerere, în primul rând, și nu este posibil să se declanșeze automat pe pageload, aceasta trebuie să fie declanșat de către un utilizator (de exemplu. un buton)
Citește mai mult: https://developer.mozilla.org/en/DOM/Using_full-screen_mode
Acest cod include, de asemenea, cum să activați ecran complet pentru Internet Explorer 9, și, probabil, versiunile mai vechi, precum și foarte recente versiuni de Google Chrome. Acceptat răspunsul poate fi de asemenea utilizat pentru alte browsere.
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}");
}
}
Surse:
requestFullscreen
"funcționează numai în timpul" "[m]ost UIEvents și MouseEvents, cum ar fi faceți clic și keydown, etc.", "deci, nu poate fi folosit cu rea intenție".)Acest lucru este cât mai aproape ca tine poate pentru a obține ecran complet în 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>
Aici este o soluție completă pentru a obține în și din modul ecran complet (aka anula, de ieșire, de evadare)
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;
}
Puteți utiliza fullscreen API Puteți vedea un exemplu aici]2
fullscreen API oferă o modalitate ușoară de conținut web pentru a fi prezentate folosind utilizatorul's întregul ecran. Acest articol oferă informații despre utilizarea acestui API.
noua tehnologie html5 – fullscreen API ne oferă o modalitate ușoară de a prezent continutului unei pagini web în modul ecran complet. Suntem pe cale de a da informații detaliate cu privire la modul fullscreen. Doar încercați să imaginați-vă despre toate posibilele avantaje pe care le puteți obține folosind acest tehnologie full-screen, albume foto, clipuri video, și chiar jocuri.
Dar înainte de a descrie această nouă tehnologie, trebuie să rețineți că această tehnologie este experimental, și susținută de toate Browserele majore.
Puteți găsi tutorial complet aici : http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/
Aici este Demo de lucru : http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm
Am'am folosit acest...
<!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>
Exemplu simplu de la: 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>
Crearea Funcției
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();
}
}
}
În Html Pune un astfel de Cod
<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>
Din fericire pentru creduli utilizatorii de web acest lucru nu se poate face cu javascript. Ar trebui să scrie specifice browser plugin-uri, dacă acestea nu't există deja, și apoi într-un fel a obține oameni să le descărcați. Cel mai aproape puteți obține este o fereastră maximizată cu nici un instrument sau bare de navigare, dar utilizatorii vor fi în continuare posibilitatea de a vedea url-ul.
Acest lucru este în general considerată o practică proastă, deși după cum se elimină o mulțime de funcționalitatea browser-ul de utilizator.
Acum, că tot ecranul Api-uri sunt mult mai răspândită și par a fi de maturare, de ce nu încercați Screenfull.js? Am folosit-o pentru prima dată ieri și de azi aplicația noastră merge cu adevărat ecran complet în (aproape) toate browserele!
Fi sigur de a cuplu cu :fullscreen
pseudo-clasa in CSS. Vezi https://www.sitepoint.com/use-html5-full-screen-api/ pentru mai multe.
Încerca screenfull.js. L's un frumos soluție cross-browser, care ar trebui să lucreze pentru browser-ul Opera la fel de bine.
înveliș Simplu pentru cross-browser utilizare de JavaScript API Fullscreen, care vă permite să aducă pagina sau orice element în pe tot ecranul. Netezește browser-ul diferențele de punere în aplicare, astfel încât să don't trebuie.
Demo.
Acest lucru poate sprijini
<%@ 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>
Încercați acest script
<script language="JavaScript">
function fullScreen(theURL) {
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto' );
}
</script>
Pentru apelarea din script folosi acest cod,
window.fullScreen('fullscreen.jsp');
sau cu hyperlink folosi acest
<a href="javascript:void(0);" onclick="fullScreen('fullscreen.jsp');">
Open in Full Screen Window</a>
Poți Încerca:
<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>
Aici este solutia completa pentru Full Screen " și " Exit Full Screen
ambele (multe mulțumiri pentru ajutor de la turn's răspunsul de mai sus):
$(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);
}
});
// De ASTEPTARE:
<input type="button" value="Full Screen" onclick="$.toggleFS(this);" />
Aceasta funcționează pentru a afișa fereastra ta în ecran complet
Notă: Pentru ca aceasta să funcționeze, aveți nevoie de Interogare http://code.jquery.com/jquery-2.1.1.min.js
Sau să aveți javascript link-ul de genul asta.
<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>
Un Q&D mod de a merge ecran complet, dacă sunteți într-o "chioșc" situație, este de a hrăni o F11 la fereastră a browser-ului după ce-l's de până și să fie difuzate. Acest lucru nu este destul de pornire și utilizatorul ar putea fi capabil de a scormoni un ecran tactil în partea de sus și a obține o semi-full-screen, dar hrănirea F11-ar putea face într-un vârf de cuțit sau doar pentru a obține a început de la un proiect.