Widget:GOV-Test: Unterschied zwischen den Versionen
Aus Altes Köln
Keine Bearbeitungszusammenfassung |
Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
<!--Test-Widget von Christopher zum Austesten des GOV-Aufrufes (eigentlich für das GenWiki)--> | <!--Test-Widget von Christopher zum Austesten des GOV-Aufrufes (eigentlich für das GenWiki)--> | ||
<h1>Ajax-Variante mit wiki</h1> | <h1>Ajax-Variante mit wiki</h1> | ||
<div id="content"></div> | |||
<div id="content"></div> | <div id="content"></div> | ||
<script> | <script> | ||
// Festgelegter Servername | // Festgelegter Servername | ||
const serverBaseURL = "https://gov.genealogy.net"; | const serverBaseURL = "https://gov.genealogy.net/item/wikihtml/SCHERGJO54EJ"; | ||
fetch('https://gov.genealogy.net | fetch('https://gov.genealogy.net') | ||
.then(response => response.text()) | .then(response => response.text()) | ||
.then(html => { | .then(html => { | ||
| Zeile 24: | Zeile 26: | ||
images.forEach(img => { | images.forEach(img => { | ||
img.src = serverBaseURL + img.getAttribute('src'); | img.src = serverBaseURL + img.getAttribute('src'); | ||
}); | }); | ||
| Zeile 59: | Zeile 40: | ||
.catch(error => console.error('Error loading content:', error)); | .catch(error => console.error('Error loading content:', error)); | ||
</script> | </script> | ||
Version vom 21. Januar 2025, 13:28 Uhr
Ajax-Variante mit wiki
<script>
// Festgelegter Servername const serverBaseURL = "https://gov.genealogy.net/item/wikihtml/SCHERGJO54EJ";
fetch('https://gov.genealogy.net')
.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');
});
// 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>
Variante: Einfacher iframe mit
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>