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