Widget:GOV-Test

Ajax-Variante mit wiki

fetch('https://example.com/fragment')

   .then(response => response.text())
   .then(html => {
       console.log('Geladener HTML-Inhalt:', html);
       document.getElementById('content').innerHTML = html;
   })
   .catch(error => console.error('Fehler beim Laden:', error));

Dies ist ein statischer Testinhalt.

Header 1	Header 2
Wert 1	Wert 2

<style>

   #widget-container {
       width: 100%;
       max-width: 800px;
       margin: 20px auto;
       padding: 10px;
       border: 1px solid #ccc;
       background-color: #f9f9f9;
       overflow: auto; /* Begrenzung der Inhalte */
   }

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