<!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> -->