<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Go full screen iframe</title>
	<script>
		document.addEventListener('DOMContentLoaded', function () {
			document.getElementById('fullscreen').onclick = function() {
				const message = document.getElementById('message');
				if (!document.fullscreenElement) {
					document.getElementsByTagName('html')[0].requestFullscreen()
						.then(() => { message.innerText = ''; })
						.catch(error => { message.innerText = error.message; });
				} else {
					document.exitFullscreen()
						.then(() => { message.innerText = ''; })
						.catch(error => { message.innerText = error.message; });
				}
			}
		});
	</script>
	<style>
		body {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
			margin: 0;
			color: black;
			background-color: white;
		}
		#message {
			color: red;
		}
	</style>
</head>
<body>
	<button id="fullscreen">Toggle <strong>full screen</strong> ↗↙</button>
	<div id="message"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Go full screen iframe</title>
	<script>
		document.addEventListener('DOMContentLoaded', function () {
			const message = document.getElementById('message');
			document.getElementById('fullscreen').onclick = function() {
				if (!document.fullscreenElement) {
					document.getElementsByTagName('html')[0].requestFullscreen()
						.catch(error => { message.innerText = error.message; });
				} else {
					document.exitFullscreen()
						.then(() => { message.innerText = message.originalInnerText; })
						.catch(error => { message.innerText = error.message; });
				}
			}
			const policy = document.permissionsPolicy ?? document.featurePolicy;
			if (typeof policy !== 'undefined') {
				message.innerText = message.originalInnerText = policy.allowsFeature('fullscreen') ? 'full screen allowed' : 'not allowed but click anyway';
			}
		});
	</script>
	<style>
		body {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
			margin: 0;
			color: black;
			background-color: white;
		}
		#message {
			color: red;
		}
	</style>
</head>
<body>
	<button id="fullscreen">Toggle <strong>full screen</strong> ↗↙</button>
	<p id="message"></p>
</body>
</html>

Use `policy.allowsFeature()` to detect whether it's possible to go full screen
Use `policy.allowsFeature()` to detect whether it's possible to go full screen
