wynemo
3/7/2018 - 6:42 AM

make some website in full screen

make some website in full screen

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/3.3.2/screenfull.min.js"></script>

</head>
<body>

<div>
<button id="mybutton">click me</button>
</div>
<script>


$('#mybutton').click(() => {
if (screenfull.enabled) {
	screenfull.request();
}

	const iframe = document.createElement('iframe');

	iframe.setAttribute('id', 'external-iframe');
	iframe.setAttribute('src', 'http://play.grafana.org/playlists/play/6');
	iframe.setAttribute('frameborder', 'no');
	iframe.style.position = 'absolute';
	iframe.style.top = '0';
	iframe.style.right = '0';
	iframe.style.bottom = '0';
	iframe.style.left = '0';
	iframe.style.width = '100%';
	iframe.style.height = '100%';

	$(document.body).prepend(iframe);
	document.body.style.overflow = 'hidden';

});



</script>
</body>
</html>