Widget:GOV-Test

Ajax-Variante mit wiki

<script>

   (function () {
       const fetchURL = "https://gov.genealogy.net/item/wikihtml/SCHERGJO54EJ";

       fetch(fetchURL)
           .then(response => {
               if (!response.ok) {
                   throw new Error(`HTTP-Fehler! Status: ${response.status}`);
               }
               return response.text();
           })
           .then(html => {
               const widgetContainer = document.getElementById('widget-container');

               // Shadow DOM erstellen
               const shadow = widgetContainer.attachShadow({ mode: 'open' });

               // Stile für das Widget im Shadow DOM hinzufügen
               const style = document.createElement('style');
               style.textContent = `
                   :host {
                       all: initial; /* Verhindert globale Stile */
                       display: block;
                       max-width: 1000px; /* Erweitere die Breite */
                       margin: 20px auto;
                       padding: 15px;
                       border: 1px solid #ccc;
                       background-color: #f9f9f9;
                       overflow: auto;
                       font-family: Arial, sans-serif; /* Setze Schriftart auf Arial */
                   }

                   table {
                       width: 100%;
                       table-layout: fixed; /* Verhindert Überdehnung */
                       border-collapse: collapse; /* Entfernt doppelte Rahmenlinien */
                       margin: 10px 0;
                   }

                   th, td {
                       border: 1px solid #ddd; /* Einfache Rahmenlinie */
                       padding: 10px;
                       text-align: left;
                       word-wrap: break-word; /* Zeilenumbruch für lange Wörter */
                       font-family: Arial, sans-serif; /* Schriftart innerhalb der Tabelle */
                   }

                   th {
                       background-color: #f2f2f2;
                   }

                   ul {
                       padding-left: 20px;
                       margin: 10px 0;
                   }

                   object {
                       max-width: 100%; /* Skaliere Karten auf Containerbreite */
                       height: auto;
                       display: block;
                       margin: 10px auto;
                   }

                   a {
                       color: #007BFF; /* Linkfarbe */
                       text-decoration: none;
                   }

                   a:hover {
                       text-decoration: underline;
                   }
               `;

               // Geladenen HTML-Inhalt einfügen
               const content = document.createElement('div');
               content.innerHTML = html;

               // Stile und Inhalte in das Shadow DOM einfügen
               shadow.appendChild(style);
               shadow.appendChild(content);
           })
           .catch(error => {
               console.error('Fehler beim Laden:', error);
               const widgetContainer = document.getElementById('widget-container');
               widgetContainer.textContent = "Fehler: Inhalte konnten nicht geladen werden.";
           });
   })();

</script>

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>