Widget:GOV-Test

Ajax-Variante mit wiki

Dies ist ein statischer Testinhalt, bevor die Inhalte geladen werden.

<script>

   (function() {
       const serverBaseURL = "https://gov.genealogy.net";

       fetch('https://gov.genealogy.net/item/wikihtml/SCHERGJO54EJ')
           .then(response => {
               if (!response.ok) {
                   throw new Error(`HTTP-Fehler! Status: ${response.status}`);
               }
               return response.text();
           })
           .then(html => {
               console.log('Geladener HTML-Inhalt:', html); // Debugging: Lade HTML-Inhalt in die Konsole

               // Temporäres DOM-Element erstellen
               const tempDiv = document.createElement('div');
               tempDiv.innerHTML = html;

               // Relativen Links den Server-Base-URL voranstellen
               const links = tempDiv.querySelectorAll('a[href^="/"]');
               links.forEach(link => {
                   link.href = serverBaseURL + link.getAttribute('href');
               });

               // Bilder-URLs anpassen
               const images = tempDiv.querySelectorAll('img[src^="/"]');
               images.forEach(img => {
                   img.src = serverBaseURL + img.getAttribute('src');
               });

               // Geladenen Inhalt in den Widget-Container einfügen
               const contentDiv = document.getElementById('content');
               contentDiv.innerHTML = tempDiv.innerHTML;
           })
           .catch(error => {
               console.error('Fehler beim Laden des Inhalts:', error);
               // Fallback: Zeige eine Fehlermeldung im Widget
               const contentDiv = document.getElementById('content');

contentDiv.innerHTML = '

Fehler: Inhalte konnten nicht geladen werden.

';

           });
   })();

</script>

<style>

   /* Styling für den Widget-Container */
   #widget-container {
       width: 100%; /* Volle Breite des Widgets */
       max-width: 800px; /* Maximale Breite des Widgets */
       margin: 20px auto; /* Zentriert auf der Seite */
       padding: 10px; /* Abstand innerhalb des Containers */
       border: 1px solid #ccc; /* Rahmen um den Container */
       background-color: #f9f9f9; /* Hintergrundfarbe */
       overflow: auto; /* Begrenzung für Inhalte */
   }

   /* Styling für Tabellen innerhalb des Widgets */
   #widget-container table {
       border-collapse: collapse;
       width: 100%;
   }

   #widget-container td, #widget-container th {
       border: 1px solid #ddd;
       padding: 8px;
   }

   #widget-container th {
       background-color: #f2f2f2;
       text-align: left;
   }

</style>

Variante: responsiv mit

<style>

   body {
     margin: 0;
     padding: 0;
     font-family: Arial, sans-serif;
   }

   .iframe-container {
     width: 100%; /* Container hat immer die volle Breite des Viewports */
     position: relative; /* Wichtig für absolute Positionierung */
     padding-top: 56.25%; /* Seitenverhältnis 16:9 */
  
   }

   iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100vw; /* Breite des Viewports */
     height: calc(100vw * 0.5625); /* Höhe proportional zur Breite (16:9) */
     transform-origin: top left; /* Skalierung startet oben links */
   }

   /* Media Queries für kleinere Bildschirme */
   @media (max-width: 768px) {
     iframe {
       transform: scale(0.9); /* Skaliere den iframe-Inhalt */
     }
   }

   @media (max-width: 480px) {
     iframe {
       transform: scale(0.8); /* Weitere Skalierung für kleine Geräte */
     }
   }
 </style>