<!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() {
				if (!document.fullscreenElement) {
					document.getElementsByTagName('html')[0].requestFullscreen()
						.catch(function (error) {
							alert(error.message);
						});
				} else {
					document.exitFullscreen()
						.catch(function (error) {
							alert(error.message);
						});
				}
			}
		});
	</script>
</head>
<body style="display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0;">
	<button id="fullscreen">Toggle <strong>full screen</strong> ↗↙</button>
</body>
</html>

<!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>
</head>
<body style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0;">
	<button id="fullscreen">Toggle <strong>full screen</strong> ↗↙</button>
	<div id="message" style="color: red;"></div>
</body>
</html>

Replace alert with error message in the page because Chrome 100 Beta says:
Replace alert with error message in the page because Chrome 100 Beta says:

"Triggering window.alert from cross origin iframes has been deprecated and will be removed in the future."

And console.log is not visible on mobiles.
