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 - 谷歌地图全屏按钮不工作（非谷歌地图应用）

回答

相关问题