javascript - 谷歌地圖全屏按鈕不工作（非谷歌地圖應用）

如下圖所示，「+」圖標是全屏按鈕。javascript - 谷歌地圖全屏按鈕不工作（非谷歌地圖應用）

當點擊它，它不會去全屏幕。

我想基本的jQuery：

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

這似乎並沒有工作。

我需要它的工作就像我們按下瀏覽器F11，它必須全屏幕上移動（不是谷歌地圖應用程序）

誰能幫助我在這裏？

來源

2017-06-23 Ashish Bahl

這是一個反應本機應用程序在Android上運行？而你希望它能夠全屏隱藏android UI？ –

我需要它去全屏，但它是一個基於javascript-jquery的應用程序，它不是一個反應本機應用程序。 –

分享更多的代碼。 –

爲了使移動瀏覽器在全屏模式下可見的，你應該使用requestFullscreen()

事件偵聽器添加到動態的，當它被加載

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

或者

按鈕

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

適用於Android的Chrome瀏覽器。

也許多計算機瀏覽器也有這種能力。

瞭解更多關於MDN

來源

2017-06-27 15:00:37

你的jQuery需要更正 - 你錯過了引號，試試這個：

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

而且你需要更新這個CSS爲要調整大小，而不是屏幕元素全屏按鈕。

是的，Element.requestFullscreen()是絕對的另一種選擇是指MDN

來源

2017-06-28 21:37:53 Upasana

我想對downvotes發表評論。請解釋你的（無論何人）推遲答案的理由。它會幫助我改進我的答案。 – Upasana

試試這個。我分別計算高度以獲得結果。在Android設備上測試。

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

來源

2017-07-04 09:21:12

您可以使用JavaScript沒有jQuery的激活全屏幕模式。

<!DOCTYPE html> 

<html> 

<head> 
    <title>Full Screen Test</title> 
</head> 

<body id="body"> 
    <h1>test</h1> 

    <script> 
    var elem = document.getElementById("body"); 

    elem.onclick = function() { 
     req = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen; 
     req.call(elem); 
    } 
    </script> 
</body> 

</html>

一兩件事，重要的是要注意，當用戶執行一個動作（例如點擊），你只能請求全屏模式。如果沒有用戶操作，則無法請求全屏模式。¹（例如，在頁面加載時）。

這裏是一個跨瀏覽器功能來切換全屏模式（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(); 
    } 
    } 
}

有關詳細信息，請參閱MDN page on full screen APIs。

如果您需要支持IE11（IE8-10）之前的IE版本的插件，請查看jQuery.fullscreen。 IE直到IE11才原生支持該功能。

來源

2017-07-04 12:05:57

javascript - 谷歌地圖全屏按鈕不工作（非谷歌地圖應用）

回答

相關問題