Widget:GOV-Test

Ajax-Variante mit wiki

<script>

   // Festgelegter Servername
   const serverBaseURL = "https://gov.genealogy.net";

   fetch('https://example.com/fragment')
       .then(response => response.text())
       .then(html => {
           // Temporäres DOM-Element erstellen, um den HTML-Fragmentinhalt zu manipulieren
           const tempDiv = document.createElement('div');
           tempDiv.innerHTML = html;

           // Alle Links (`<a>`-Tags) anpassen
           const links = tempDiv.querySelectorAll('a[href^="/"]'); // Selektiert Links mit relativen Pfaden
           links.forEach(link => {
               link.href = serverBaseURL + link.getAttribute('href');
           });

           // Alle Bilder (`<img>`-Tags) anpassen
           const images = tempDiv.querySelectorAll('img[src^="/"]'); // Selektiert Bilder mit relativen Pfaden
           images.forEach(img => {
               img.src = serverBaseURL + img.getAttribute('src');
           });

           // Manipulation der `relationshipGraph`-Bilder für iViewer
           const graphLinks = tempDiv.querySelectorAll('a[href*="relationshipGraph"]');
           graphLinks.forEach(link => {
               const img = link.querySelector('img');
               if (img) {
                   const wrapper = document.createElement('div');
                   wrapper.className = 'viewer'; // iViewer erwartet eine Klasse oder ID
                   link.parentNode.replaceChild(wrapper, link);

                   // iViewer initialisieren
                   $(wrapper).iviewer({
                       src: img.src,          // Bildquelle
                       zoom: 'fit',           // Standardmäßig an den Container anpassen
                       zoom_base: 100,        // Basis-Zoom-Stufe
                       zoom_max: 800,         // Maximaler Zoom (800%)
                       zoom_min: 25,          // Minimaler Zoom (25%)
                       ui_disabled: false,    // Benutzeroberfläche (Buttons) anzeigen
                   });
               }
           });

           // Manipulierten Inhalt in die Seite einfügen
           document.getElementById('content').innerHTML = tempDiv.innerHTML;

           // Beispiel für Styling
           const table = document.querySelector('#content table');
           if (table) {
               table.style.width = '100%';
               table.style.fontFamily = 'Arial, sans-serif';
           }
       })
       .catch(error => console.error('Error loading content:', error));

</script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iviewer/0.7.11/jquery.iviewer.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/iviewer/0.7.11/jquery.iviewer.min.js"></script>

<style>

   /* Styling für den Viewer */
   .viewer {
       width: 100%;
       height: 500px;
       position: relative;
       margin: auto;
       border: 1px solid #ccc;
   }

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