File size: 4,540 Bytes
7eb7701 447f4ff 7eb7701 447f4ff 7eb7701 447f4ff 7eb7701 447f4ff 7eb7701 447f4ff 7eb7701 447f4ff 7eb7701 447f4ff 7eb7701 447f4ff 7eb7701 447f4ff 06d399c 447f4ff 7eb7701 06d399c 447f4ff 7eb7701 447f4ff 7eb7701 447f4ff e3dfcc5 447f4ff e3dfcc5 447f4ff e3dfcc5 c0cb957 447f4ff |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 |
<!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>
--> |