javascript - Google Maps Przycisk pełnego ekranu nie działa (aplikacja mapy innej niż google)

Jak pokazano poniżej, ikona "+" jest przyciskiem pełnego ekranu.javascript - Google Maps Przycisk pełnego ekranu nie działa (aplikacja mapy innej niż google)

Po kliknięciu na nią, nie iść na pełnym ekranie.

starałem podstawowy jQuery:

$("#fullScreen-btn").css({height: 100%, width: 100%});

nie wydają się działać.

muszę go do pracy jak my naciśnij F11 na przeglądarkach, musi przejść cały ekran na telefon (nie aplikacja Google Maps)

Czy ktoś może mi pomóc tutaj?

Źródło

2017-06-23 Ashish Bahl

Czy jest to natywna aplikacja reagująca na Androida? A chcesz, żeby móc przejść na pełny ekran, ukrywając interfejs Androida? –

Potrzebuję go, aby przejść do trybu pełnoekranowego, ale jest to aplikacja oparta na języku jQuery i nie jest to aplikacja natywna reagująca. –

udostępnij więcej kodu. –

Aby Mobile Browser widoczne w trybie pełnoekranowym, należy użyć requestFullscreen()

Dodaj detektor zdarzeń do przycisku dynamicznie gdy jest ładowany jako

button.addEventListener("click",function(){ 
     document.body.requestFullscreen(); 
});

button.addEventListener("click",function(){ 
     document.documentElement.requestFullscreen(); 
});

Działa dla Chrome na Androida.

Również wiele przeglądarek dla komputerów ma tę zdolność.

Czytaj więcej na MDN

Źródło

2017-06-27 15:00:37

Twój jQuery wymaga korekty - przegapiłeś cytaty, spróbuj tego:

$("#fullScreen-elm").css({"height": "100%", "width": "100%"});

a ponadto trzeba aktualizować css dla elementu ekranu, który chcesz zmienić rozmiar i nie przycisk pełnoekranowy.

I tak, Element.requestFullscreen() jest zdecydowanie inna opcja odnosi MDN

Źródło

2017-06-28 21:37:53 Upasana

Chciałbym mieć komentarze na temat notowań w dół. Wyjaśnij swój (niezależnie od) powód, by udzielić odpowiedzi. Pomoże mi w ulepszeniu mojej odpowiedzi. – Upasana

Spróbuj tego. Obliczyłem wysokość oddzielnie, aby uzyskać wyniki. Testowane w urządzeniu z Androidem.

$(document).ready(function() { 
 
    let height = $(document).height(); 
 
    $('.fullscreen').on('click', function() { 
 
    $('iframe').css({ 
 
     height: height, 
 
     width: '100%' 
 
    }); 
 
    }); 
 
});

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.fullscreen { 
 
    position: absolute; 
 
    top: 10px; 
 
    right: 10px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
</head> 
 

 
<body> 
 
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d423283.3363121453!2d-118.69191670818714!3d34.020750397391296!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2sLos+Angeles%2C+CA%2C+USA!5e0!3m2!1sen!2srw!4v1499159650271" 
 
    width="250" height="250" frameborder="0" style="border:0" allowfullscreen></iframe> 
 
    <div class="container"> 
 
    <input type="button" name="fullscreen" value="fullscreen" class="fullscreen" /> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
</body> 
 

 
</html>

Źródło

2017-07-04 09:21:12

Można aktywować tryb pełnego ekranu przy użyciu JavaScript bez jQuery.

Jedna rzecz, o której należy pamiętać, można zażądać trybu pełnoekranowego tylko wtedy, gdy użytkownik wykona czynność (np. Kliknięcie). Nie można żądać trybu pełnego ekranu bez działania użytkownika.

Oto krzyż funkcji przeglądarki, aby włączyć tryb pełnoekranowy (as obtained from the MDN):

function toggleFullScreen() { 
    if (!document.fullscreenElement && // alternative standard method 
     !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement) { // current working methods 
    if (document.documentElement.requestFullscreen) { 
     document.documentElement.requestFullscreen(); 
    } else if (document.documentElement.msRequestFullscreen) { 
     document.documentElement.msRequestFullscreen(); 
    } else if (document.documentElement.mozRequestFullScreen) { 
     document.documentElement.mozRequestFullScreen(); 
    } else if (document.documentElement.webkitRequestFullscreen) { 
     document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT); 
    } 
    } else { 
    if (document.exitFullscreen) { 
     document.exitFullscreen(); 
    } else if (document.msExitFullscreen) { 
     document.msExitFullscreen(); 
    } else if (document.mozCancelFullScreen) { 
     document.mozCancelFullScreen(); 
    } else if (document.webkitExitFullscreen) { 
     document.webkitExitFullscreen(); 
    } 
    } 
}

Aby uzyskać więcej informacji, zapoznaj się z MDN page on full screen APIs.

Jeśli potrzebujesz wtyczki, która obsługuje wersje IE przed IE11 (IE8-10), spójrz na jQuery.fullscreen. IE nie obsługiwał tej funkcji natywnie, aż do IE11.

Źródło

2017-07-04 12:05:57

javascript - Google Maps Przycisk pełnego ekranu nie działa (aplikacja mapy innej niż google)

Odpowiedz

Powiązane problemy