6aa5a7143a
- IframeCarteAEP.astro : iframe https://aep.trans-former.fr/agences avec skeleton loader + timeout 8s + fallback lien externe - ScrollArticles.astro : 7 articles placeholder (V1, PC6 remplacera par fetch journal.json) - ColCentre.astro : zone BAS cablee (iframe min-h 60vh mobile / 400px desktop + scroll articles dessous) - Preflight headers : pas de X-Frame-Options ni frame-ancestors restrictifs sur /agences (200 OK), iframe cross-origin permise sans modif Caddy
56 lines
1.8 KiB
Plaintext
56 lines
1.8 KiB
Plaintext
---
|
|
// PC4 - iframe carte AEP (cartobifurcation) avec skeleton loader + fallback timeout 8s.
|
|
// Route confirmee 200 sans X-Frame-Options ni frame-ancestors restrictifs (preflight 2026-05-08).
|
|
const CARTE_URL = 'https://aep.trans-former.fr/agences';
|
|
---
|
|
<div class="relative h-full w-full bg-neutral-100">
|
|
<!-- Skeleton loader -->
|
|
<div
|
|
id="iframe-skeleton"
|
|
class="absolute inset-0 flex items-center justify-center bg-neutral-50 animate-pulse"
|
|
>
|
|
<div class="text-neutral-400 text-sm">Chargement de la carte AEP...</div>
|
|
</div>
|
|
|
|
<iframe
|
|
id="carte-aep-iframe"
|
|
src={CARTE_URL}
|
|
title="Carte des reseaux AEP - cartobifurcation"
|
|
class="w-full h-full border-0 opacity-0 transition-opacity duration-500"
|
|
loading="lazy"
|
|
referrerpolicy="no-referrer-when-downgrade"
|
|
sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
|
|
></iframe>
|
|
</div>
|
|
|
|
<script>
|
|
const iframe = document.getElementById('carte-aep-iframe') as HTMLIFrameElement | null;
|
|
const skeleton = document.getElementById('iframe-skeleton');
|
|
|
|
iframe?.addEventListener('load', () => {
|
|
iframe.classList.remove('opacity-0');
|
|
iframe.classList.add('opacity-100');
|
|
skeleton?.classList.add('hidden');
|
|
});
|
|
|
|
// Timeout securite : si pas charge en 8s, afficher fallback lien externe.
|
|
setTimeout(() => {
|
|
if (skeleton && !skeleton.classList.contains('hidden')) {
|
|
skeleton.innerHTML = `
|
|
<div class="text-center text-neutral-500 px-4">
|
|
<p class="mb-2 text-sm">La carte n'a pas pu charger.</p>
|
|
<a
|
|
href="https://aep.trans-former.fr/agences"
|
|
target="_blank"
|
|
rel="noopener"
|
|
class="text-blue-600 underline text-sm"
|
|
>
|
|
Ouvrir dans un nouvel onglet →
|
|
</a>
|
|
</div>
|
|
`;
|
|
skeleton.classList.remove('animate-pulse');
|
|
}
|
|
}, 8000);
|
|
</script>
|