coder

Running

App Files Files Community

coder / index.html

nofl

Update index.html

447f4ff verified over 1 year ago

raw

history blame contribute delete

4.54 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="description" content="Full screen iframe implementation">
	<title>Full Screen Iframe</title>
	<style>
	/* CSS Reset for cross-browser consistency */
	*,
	*::before,
	*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}

	/* Base styles */
	html, body {
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	position: relative;
	}

	/* Container for iframe with fallback message */
	.iframe-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
	}

	/* Iframe styles with improved performance */
	.responsive-iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none;
	overflow: hidden;
	/* Enable hardware acceleration */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	/* Improve scrolling performance */
	-webkit-overflow-scrolling: touch;
	}

	/* Fallback message styling */
	.fallback-message {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	padding: 20px;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	}

	/* Show fallback when iframe fails */
	.iframe-error .fallback-message {
	display: block;
	}

	.iframe-error .responsive-iframe {
	display: none;
	}
	</style>
	</head>
	<body>
	<div class="iframe-container">
	<iframe
	src="https://aidark.net/"
	class="responsive-iframe"
	title="Full screen content"
	sandbox="allow-scripts allow-same-origin allow-forms"
	loading="lazy"
	referrerpolicy="no-referrer"
	onload="this.parentElement.classList.remove('iframe-error')"
	onerror="this.parentElement.classList.add('iframe-error')"
	></iframe>
	<div class="fallback-message">
	<h2>Unable to load content</h2>
	<p>Please check your internet connection and try again.</p>
	</div>
	</div>

	<script>
	// Handle iframe loading errors
	window.addEventListener('load', function() {
	const iframe = document.querySelector('.responsive-iframe');
	const container = document.querySelector('.iframe-container');

	// Additional error handling
	iframe.addEventListener('error', function() {
	container.classList.add('iframe-error');
	});

	// Handle resize events efficiently
	let resizeTimeout;
	window.addEventListener('resize', function() {
	clearTimeout(resizeTimeout);
	resizeTimeout = setTimeout(function() {
	// Trigger reflow only when resize ends
	iframe.style.height = window.innerHeight + 'px';
	iframe.style.width = window.innerWidth + 'px';
	}, 250);
	});
	});
	</script>
	</body>
	</html>
	<!--

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Full Screen Iframe</title>
	<style>
	/* Remove padding and margin for body and html */
	html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	}

	/* Make the iframe full screen and remove the border */
	iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: none; /* Removes the border */
	margin: 0;
	padding: 0;
	overflow: hidden; /* Prevents scrollbars */
	}
	</style>
	</head>
	<body>

	<iframe src="https://aidark.net/" frameborder="0" scrolling="no"></iframe>

	</body>
	</html>
	-->