Altes Köln

Widget:GOV-Test: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
VisuellWikitext
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
<h1>Laden der GOV-Seite mit Javascript (fetch)</h1>
<h1>Laden der GOV-Seite mit Javascript (fetch)</h1>
<div id="external-content"></div>
<div id="gov-content"></div>
<script>
<script>
   fetch('https://gov.genealogy.net/item/show/HOHAUSJO30MX')
   fetch('https://gov.genealogy.net/item/show/HOHAUSJO30MX')
     .then(response => response.text())
     .then(response => response.text())
     .then(data => {
     .then(data => {
       document.getElementById('external-content').innerHTML = data;
       document.getElementById('gov-content').innerHTML = data;
     })
     })
     .catch(error => {
     .catch(error => {
       console.error('Error loading external content:', error);
       console.error('Error loading GOV content:', error);
     });
     });
</script>
</script>


<h1>Laden der Übersichtskarte mit Javascript (fetch)</h1>
<h1>Laden der Übersichtskarte mit Javascript (fetch)</h1>
<div id="map-content"></div>
<script>
<script>
  // URL des Bildes
   const mapUrl = 'https://gov.genealogy.net/item/map/HOHAUSJO30MX';
   const imageUrl = 'https://gov.genealogy.net/item/map/HOHAUSJO30MX';


  // Abrufen des Bildes
   fetch(mapUrl)
   fetch(imageUrl)
     .then(response => {
     .then(response => {
      // Prüfen, ob die Antwort erfolgreich ist
       if (!response.ok) {
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
         throw new Error(`HTTP error! status: ${response.status}`);
       }
       }
       return response.blob(); // Die Bilddaten als Blob zurückgeben
       return response.blob();
     })
     })
     .then(blob => {
     .then(blob => {
      // Erstellen eines URL-Objekts für das Bild
       const mapObjectUrl = URL.createObjectURL(blob);
       const imageObjectUrl = URL.createObjectURL(blob);


      // Einfügen des Bildes in die Seite
       const imgElement = document.createElement('img');
       const imgElement = document.createElement('img');
       imgElement.src = imageObjectUrl;
       imgElement.src = mapObjectUrl;
       imgElement.alt = 'Karte';
       imgElement.alt = 'Karte';
       imgElement.style.maxWidth = '100%'; // Optional: Bild skalieren
       imgElement.style.maxWidth = '100%';
       imgElement.style.height = 'auto';
       imgElement.style.height = 'auto';


      // Bild in das Ziel-Element einfügen
       document.getElementById('map-content').appendChild(imgElement);
       document.getElementById('external-content').appendChild(imgElement);
     })
     })
     .catch(error => {
     .catch(error => {
       console.error('Error loading image:', error);
       console.error('Error loading map:', error);
     });
     });
</script>
</script>


<h1>Laden der Grafik mit übergeordneten Objekten mit Javascript (fetch)</h1>
<h1>Laden der Grafik mit übergeordneten Objekten mit Javascript (fetch)</h1>
<div id="relationship-graph-content"></div>
<script>
  const relationshipGraphUrl = 'https://gov.genealogy.net/item/relationshipGraph/HOHAUSJO30MX?full-size=1';


 
   fetch(relationshipGraphUrl)
<script>  // URL des Bildes
  const imageUrl = 'https://gov.genealogy.net/item/relationshipGraph/HOHAUSJO30MX?full-size=1';
 
  // Abrufen des Bildes
   fetch(imageUrl)
     .then(response => {
     .then(response => {
      // Prüfen, ob die Antwort erfolgreich ist
       if (!response.ok) {
       if (!response.ok) {
         throw new Error(`HTTP error! status: ${response.status}`);
         throw new Error(`HTTP error! status: ${response.status}`);
       }
       }
       return response.blob(); // Die Bilddaten als Blob zurückgeben
       return response.blob();
     })
     })
     .then(blob => {
     .then(blob => {
      // Erstellen eines URL-Objekts für das Bild
       const graphObjectUrl = URL.createObjectURL(blob);
       const imageObjectUrl = URL.createObjectURL(blob);


      // Einfügen des Bildes in die Seite
       const imgElement = document.createElement('img');
       const imgElement = document.createElement('img');
       imgElement.src = imageObjectUrl;
       imgElement.src = graphObjectUrl;
       imgElement.alt = 'Beziehungsgraph';
       imgElement.alt = 'Beziehungsgraph';
       imgElement.style.maxWidth = '100%'; // Optional: Bild skalieren
       imgElement.style.maxWidth = '100%';
       imgElement.style.height = 'auto';
       imgElement.style.height = 'auto';


      // Bild in das Ziel-Element einfügen
       document.getElementById('relationship-graph-content').appendChild(imgElement);
       document.getElementById('external-content').appendChild(imgElement);
     })
     })
     .catch(error => {
     .catch(error => {
       console.error('Error loading image:', error);
       console.error('Error loading relationship graph:', error);
     });
     });
</script>
</script>

Version vom 12. Januar 2025, 18:35 Uhr

Laden der GOV-Seite mit Javascript (fetch)

<script> 

 fetch('https://gov.genealogy.net/item/show/HOHAUSJO30MX')
   .then(response => response.text())
   .then(data => {
     document.getElementById('gov-content').innerHTML = data;
   })
   .catch(error => {
     console.error('Error loading GOV content:', error);
   });

</script>

Laden der Übersichtskarte mit Javascript (fetch)

<script> 

 const mapUrl = 'https://gov.genealogy.net/item/map/HOHAUSJO30MX';

 fetch(mapUrl)
   .then(response => {
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
     }
     return response.blob();
   })
   .then(blob => {
     const mapObjectUrl = URL.createObjectURL(blob);

     const imgElement = document.createElement('img');
     imgElement.src = mapObjectUrl;
     imgElement.alt = 'Karte';
     imgElement.style.maxWidth = '100%';
     imgElement.style.height = 'auto';

     document.getElementById('map-content').appendChild(imgElement);
   })
   .catch(error => {
     console.error('Error loading map:', error);
   });

</script>

Laden der Grafik mit übergeordneten Objekten mit Javascript (fetch)

<script> 

 const relationshipGraphUrl = 'https://gov.genealogy.net/item/relationshipGraph/HOHAUSJO30MX?full-size=1';

 fetch(relationshipGraphUrl)
   .then(response => {
     if (!response.ok) {
       throw new Error(`HTTP error! status: ${response.status}`);
     }
     return response.blob();
   })
   .then(blob => {
     const graphObjectUrl = URL.createObjectURL(blob);

     const imgElement = document.createElement('img');
     imgElement.src = graphObjectUrl;
     imgElement.alt = 'Beziehungsgraph';
     imgElement.style.maxWidth = '100%';
     imgElement.style.height = 'auto';

     document.getElementById('relationship-graph-content').appendChild(imgElement);
   })
   .catch(error => {
     console.error('Error loading relationship graph:', error);
   });

</script>


Einfaches HTML (nur Hyberlink auf GOV)

Hello World

Die GOV-Daten <a href="https://gov.genealogy.net/item/show/HOHAUSJO30MX">finden Sie hier</a>.

Aufruf von GOV mit Object

<object data="https://gov.genealogy.net/item/show/HOHAUSJO30MX" width="600" height="400"></object>

Aufruf von GOV mit Iframe

Abgerufen von „https://admiring-ritchie.45-83-104-238.plesk.page/index.php?title=Widget:GOV-Test&oldid=77778“
Cookies helfen uns bei der Bereitstellung von Altes Köln. Durch die Nutzung von Altes Köln erklärst du dich damit einverstanden, dass wir Cookies speichern.