जावास्क्रिप्ट के साथ खिड़की को पूर्ण स्क्रीन कैसे बनाएं


253

मैं एक विज़िटर के ब्राउज़र को जावास्क्रिप्ट, IE, फ़ायरफ़ॉक्स और ओपेरा के साथ काम करने वाले तरीके से फुलस्क्रीन कैसे बना सकता हूँ?


29
इसका आंतरिक अनुप्रयोग, जनता के लिए नहीं। im किसी को भी गाली नहीं दे रहा है
user63898

2
आप, व्यावहारिक रूप से, उपयोगकर्ता से पूछ सकते हैं:sprintf('Dear user, the best experience with this site is in fullscreen mode. To view this site full screen, press %s.', _get_browsers_full_Screen_key())
बोल्ड्यूवेन

6
मैं उत्सुक हूं कि youtube फुलस्क्रीन कैसे काम करता है। किसी को जवाब पता है?
कस्तूरी

6
यह फ़्लैश प्लेयर द्वारा नहीं ब्राउज़र द्वारा किया जाता है
user63898

5
कला अवलोकन की स्थिति के लिए यहाँ देखें: hacks.mozilla.org/2012/01/…
loomi

जवाबों:


54

यह उतना ही करीब है जितना कि आप जावास्क्रिप्ट में पूर्ण स्क्रीन पर आ सकते हैं:

<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> 

लिंक में दिए गए लिंक / स्वीकृत उत्तर को देखें, जो पोस्ट किया गया है, उसे हटा दें ... आपको ब्राउज़र का आकार बदलने में सक्षम नहीं होना चाहिए। हालाँकि आप ब्राउज़र विंडो के भीतर अधिकतम कर सकते हैं (कि मैं इसे कैसे पढ़ता हूँ)
lexu

4
विकल्प में आपकी जावास्क्रिप्ट अनुमति सेटिंग्स पर निर्भर करता है। आप विंडो सुविधाओं पर js नियंत्रण टॉगल कर सकते हैं।
गरबा करें

3
पिछली बार ऐसा हुआ था कि एक साइट ने इस तरह के कोड का इस्तेमाल किया था और मैंने इसे ब्लॉक नहीं किया था: dorward.me.uk/tmp/fullscreen.jpeg
Quentin

2
वेबकिट-फ़ुलस्क्रीन API पर एक नज़र डालें: रक्तस्राव- tlv.appspot.com/#28 (# gdd2011 से)
क्रिश्चियन कुटेबैक

17
यह पुराना है। समाधान के लिए कम देखो!
केवॉन

281

क्रोम 15, फ़ायरफ़ॉक्स 10, सफारी 5.1, IE 10 जैसे नए ब्राउज़रों में यह संभव है। यह उनके ब्राउज़र सेटिंग्स के आधार पर ActiveX के माध्यम से पुराने IE के लिए भी संभव है।

यह कैसे करना है:

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);

उपयोगकर्ता को स्पष्ट रूप से फुलस्क्रीन अनुरोध को स्वीकार करने की आवश्यकता है, और पगेलॉड पर इसे स्वचालित रूप से ट्रिगर करना संभव नहीं है, इसे उपयोगकर्ता (जैसे कि एक बटन) द्वारा ट्रिगर करने की आवश्यकता है।

और पढ़ें: https://developer.mozilla.org/en/DOM/Using_full-screen_mode


3
वर्तमान में Chrome 15, Firefox 10 और Safari 5.1 में उपलब्ध है। खेलने की वर्तमान स्थिति के विवरण के लिए इस hacks.mozilla.org ब्लॉग पोस्ट को देखें।
शमौन Lieschke

10
शानदार, फुल स्क्रीन से बाहर निकलने का कोई तरीका?
क्रिस्टोफर चेस

2
कुछ बातें। IE में यह स्पष्ट रूप से तत्व और पूर्ण स्क्रीन को अनदेखा करेगा। यदि आप स्क्रीन को पूरा करना चाहते हैं तो सब कुछ पास document.documentElementहो जाएगा और सुनिश्चित करेगा कि आपको सही रूट एलिमेंट ('html' या 'बॉडी') मिल जाएगा। और उपयोग cancelFullscreen()इसे बंद करने के लिए उपयोग कर सकते हैं (या IE के लिए फिर से 'F11' भेज सकते हैं )।
मैथ्यू विलकॉक्सन

6
यह केवल उपयोगकर्ता द्वारा ट्रिगर किया जा सकता है (उदाहरण के लिए फुलस्क्रीन बटन के माध्यम से)। ऑनलोड के दौरान स्वचालित फुलस्क्रीन संभव नहीं है।
ए। के।

3
IE के लिए वर्तनी की त्रुटि, msRequestFullScreen होनी चाहिए, जैसा कि डॉक्स में msdn.microsoft.com/en-us/library/ie/dn265028(v=vs.85).aspx
DanielB

66

इस कोड में इंटरनेट एक्सप्लोरर 9 और शायद पुराने संस्करणों के साथ-साथ Google क्रोम के हाल के संस्करणों के लिए पूर्ण स्क्रीन को सक्षम करने का तरीका भी शामिल है। स्वीकृत उत्तर का उपयोग अन्य ब्राउज़रों के लिए भी किया जा सकता है।

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}");
  }
}

सूत्रों का कहना है:


IE 8 से ऊपर, FF10 पर काम करता है (FF 9 में कोशिश की गई, यह काम नहीं करता है), Chrome 18 पर परीक्षण किया गया
Treby

@Peter O. "ईवेंट हैंडलर में रखा जाना चाहिए", किसी भी तरह से इसे ऑनलोड करने के लिए ट्रिगर किया जाए?
फ्रांसिस पी

@ फ्रैंसिसिस: नहीं; न तो "लोड" और न ही "DOMContentLoaded" फुलस्क्रीन एपीआई के लिए एक लागू UIEvent या माउसईवेंट है।
पीटर ओ।

2
इसके लिए धन्यवाद (ध्यान दें, हालांकि, यह requestFullScreen "केवल" [[]] के दौरान काम करता है "सामान्य UIEvents और MouseEvents, जैसे कि क्लिक और कीडाउन, इत्यादि", "इसलिए इसे दुर्भावनापूर्ण रूप से उपयोग नहीं किया जा सकता है"।)

हां मेरे लिए इससे documentElementबेहतर है body
मैट

24

यहाँ पूर्ण स्क्रीन मोड में और बाहर जाने के लिए एक पूर्ण समाधान है (उर्फ रद्द करें, बाहर निकलें, बाहर निकलें)

        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;
        }

1
किस बारे में msIsFullScreen?
kangax

1
युक्ति बदल गई है। webkitCancelFullScreenअब है webkitExitFullscreengeneratecontent.org/post/70347573294/…
डग एस

इस तार्किक और संचालन का पहला भाग निरर्थक है और इसे हटा दिया जाना चाहिएdocument.fullScreenElement && document.fullScreenElement !== null
consideRatio

बदलने elemमें toggleFull()से document.bodyकरने के लिए document.documentElementठीक करने के लिए छोड़ दिया और सही मार्जिन मुद्दा
Firnas

11

आप फुलस्क्रीन एपीआई का उपयोग कर सकते हैं आप यहां एक उदाहरण देख सकते हैं

फुलस्क्रीन एपीआई उपयोगकर्ता की संपूर्ण स्क्रीन का उपयोग करके प्रस्तुत की जाने वाली वेब सामग्री के लिए एक आसान तरीका प्रदान करता है। यह लेख इस एपीआई का उपयोग करने के बारे में जानकारी प्रदान करता है।


8

नई एचटीएमएल 5 तकनीक - फुलस्क्रीन एपीआई हमें फुल-स्क्रीन मोड में एक वेब पेज कंटेंट पेश करने का एक आसान तरीका देता है। हम आपको फुलस्क्रीन मोड के बारे में विस्तृत जानकारी देने वाले हैं। बस उन सभी संभावित फायदों के बारे में कल्पना करने की कोशिश करें जो आप इस तकनीक का उपयोग करके प्राप्त कर सकते हैं - पूर्ण स्क्रीन फोटो एल्बम, वीडियो और यहां तक ​​कि खेल भी।

लेकिन इससे पहले कि हम इस नई तकनीक का वर्णन करें, मुझे यह ध्यान रखना होगा कि यह तकनीक प्रयोगात्मक है, और सभी प्रमुख ब्राउज़रों द्वारा समर्थित है

आप पूरा ट्यूटोरियल यहां देख सकते हैं: http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/

यहाँ डेमो काम कर रहा है: http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm


1
@ इयान एज में काम कर रहा है। IE का पुराना संस्करण इसका समर्थन नहीं कर रहा है।
धीरज

8

मैंने इसका उपयोग किया है ...

<!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>

window.open (theURL, '', 'fullscreen = yes', 'scrollbars = auto'); इस लाइन पर एक समस्या है
केविन बोर्सॉक्स

हालांकि यह माता पिता से है। जब खिड़की पहले ही खोली जा चुकी हो तो मददगार नहीं।
ईसाई

7

इससे सरल उदाहरण: 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>

6

फ़ंक्शन बनाएँ

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();
                }
            }
        }

जैसे एचटीएमएल पुट कोड

<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>

यदि कथन को यह पता नहीं लगता है कि IE 11 में पूर्ण स्क्रीन मोड (तो बंद नहीं होता है)।
इयान

3

अब जब फुल स्क्रीन एपीआई अधिक व्यापक हो गई है और परिपक्व होती दिखाई दे रही है, तो स्क्रीनफुल.जेएस क्यों नहीं आज़माएं ? मैंने कल पहली बार इसका इस्तेमाल किया था और आज हमारा ऐप सही मायने में फुल स्क्रीन पर (लगभग) सभी ब्राउजर में जाता है!

:fullscreenसीएसएस में छद्म वर्ग के साथ इसे युगल करना सुनिश्चित करें । अधिक के लिए https://www.sitepoint.com/use-html5-full-screen-api/ देखें ।


अद्भुत लिपि। अब www.StarCommanderOnline.com पर मेरी वेबसाइट पर इसका उपयोग करना। धन्यवाद!
एंडी

3

सौभाग्य से वेब उपयोगकर्ताओं के लिए यह केवल जावास्क्रिप्ट के साथ नहीं किया जा सकता है। आपको ब्राउज़र विशिष्ट प्लगइन्स लिखने की आवश्यकता होगी, अगर वे पहले से मौजूद नहीं थे, और फिर किसी तरह लोगों को उन्हें डाउनलोड करने के लिए मिलता है। निकटतम आप प्राप्त कर सकते हैं एक अधिकतम खिड़की है जिसमें कोई टूल या नेविगेशन बार नहीं है लेकिन उपयोगकर्ता अभी भी url देख पाएंगे।

window.open('http://www.web-page.com', 'title' , 'type=fullWindow, fullscreen, scrollbars=yes');">

यह आमतौर पर बुरा अभ्यास माना जाता है, क्योंकि यह उपयोगकर्ता से बहुत सारी ब्राउज़र कार्यक्षमता को हटा देता है।


3

Screenfull.js की कोशिश करें । यह एक अच्छा क्रॉस-ब्राउज़र समाधान है जो ओपेरा ब्राउज़र के लिए भी काम करना चाहिए।

जावास्क्रिप्ट फुलस्क्रीन एपीआई के क्रॉस-ब्राउज़र उपयोग के लिए सरल आवरण, जो आपको पेज या किसी भी तत्व को फुलस्क्रीन में लाने देता है। ब्राउज़र कार्यान्वयन अंतर को चिकना करता है, इसलिए आपको नहीं करना है।

डेमो


2

यह समर्थन कर सकता है

<%@ 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>

2

क्या आप इसे आजमा सकते है:

<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>


उबंटू में क्रोम 76 में
जोनाथन

1

इस स्क्रिप्ट को आज़माएं

<script language="JavaScript">
function fullScreen(theURL) {
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto' );
}
</script>

स्क्रिप्ट से कॉलिंग के लिए इस कोड का उपयोग करें,

window.fullScreen('fullscreen.jsp');

या हाइपरलिंक के साथ इसका उपयोग करें

<a href="javascript:void(0);" onclick="fullScreen('fullscreen.jsp');"> 
Open in Full Screen Window</a>

1

फ़ायरफ़ॉक्स 10 में, आप इस जावास्क्रिप्ट का उपयोग करके वर्तमान पृष्ठ को फुलस्क्रीन (बिना विंडो क्रोम वाला असली फुलस्क्रीन) बना सकते हैं:

window.fullScreen = true;

1
सॉफ्टवेयर में "माना जाता है" शब्द बहुत अधिक है। कुछ ब्राउज़रों में यह केवल पढ़ने के लिए है। फ़ायरफ़ॉक्स 10 आपको इसे सेट करने देता है।
तेंदुए

1

यह आपकी विंडो को पूर्ण स्क्रीन में दिखाने का काम करेगा

नोट: इस काम के लिए, आपको http://code.jquery.com/jquery-2.1.1.1.min.js से क्वेरी की आवश्यकता है

या इस तरह से जावास्क्रिप्ट लिंक करें।

<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>

0

पूर्ण स्क्रीन पर जाने का एक प्रश्नोत्तर तरीका, यदि आप "कियोस्क" स्थिति में हैं, तो ऊपर और चलने के बाद ब्राउज़र विंडो को एक F11 खिलाना है। यह बहुत शुरू नहीं हुआ है और उपयोगकर्ता शीर्ष पर एक टच स्क्रीन को पोक करने और एक अर्ध-पूर्ण-स्क्रीन दृश्य प्राप्त करने में सक्षम हो सकता है, लेकिन F11 को खिलाना एक चुटकी में या बस एक परियोजना पर शुरू करने के लिए हो सकता है।


0

यहाँ Full Screenऔर Exit Full Screenदोनों के लिए मेरा पूरा समाधान है (ऊपर टावर के जवाब से मदद करने के लिए बहुत धन्यवाद):

$(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);
}

});

// कॉलिंग:

<input type="button" value="Full Screen" onclick="$.toggleFS(this);" />
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.