javascript - 谷歌地图全屏按钮不工作(非谷歌地图应用)
问题描述:
如下图所示,“+”图标是全屏按钮。javascript - 谷歌地图全屏按钮不工作(非谷歌地图应用)
当点击它,它不会去全屏幕。
我想基本的jQuery:
$("#fullScreen-btn").css({height: 100%, width: 100%});
这似乎并没有工作。
我需要它的工作就像我们按下浏览器F11,它必须全屏幕上移动(不是谷歌地图应用程序)
谁能帮助我在这里?
答
为了使移动浏览器在全屏模式下可见的,你应该使用requestFullscreen()
事件侦听器添加到动态的,当它被加载
button.addEventListener("click",function(){
document.body.requestFullscreen();
});
或者
按钮button.addEventListener("click",function(){
document.documentElement.requestFullscreen();
});
适用于Android的Chrome浏览器。
也许多计算机浏览器也有这种能力。
了解更多关于MDN
答
试试这个。我分别计算高度以获得结果。在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>
答
您可以使用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>
一两件事,重要的是要注意,当用户执行一个动作(例如点击),你只能请求全屏模式。如果没有用户操作,则无法请求全屏模式。1(例如,在页面加载时)。
这里是一个跨浏览器功能来切换全屏模式(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才原生支持该功能。
这是一个反应本机应用程序在Android上运行? 而你希望它能够全屏隐藏android UI? –
我需要它去全屏,但它是一个基于javascript-jquery的应用程序,它不是一个反应本机应用程序。 –
分享更多的代码。 –