Wenn wir ein iFrame auf unserer WordPress Webseite einbauen wollen, ist es wichtig, die User Experience (UX) nicht aus den Augen zu verlieren. iFrames mit dynamischen Inhalten weisen oft nach Eingabe von Daten (z.B. bei Hotelbuchungen, Mietwagenvergleichen etc.) Änderungen in der Höhe des iFrames auf. Damit wir unschöne Scrollbalken (scrollbar) vermeiden müssen wir sicherstellen, dass die iFrame Größe sich automatisch an den Inhalt anpasst.
Cross Domain vs. Same Domain
Sollte das einzubindende iFrame auf der gleichen Domain liegen, können wir eine einfachere Lösung als den iFrame Resizer nutzen. Eine Möglichkeit wäre z.B. diese hier:
iFrame same Domain
Diesen Code könnt ihr einfach im Editor unter “Text” (direkt neben “Visuell”) in eurem WYSIWYG-Editor einfügen.
<script type="application/javascript">
function resizeIFrameToFitContent( iFrame ) {
iFrame.width = iFrame.contentWindow.document.body.scrollWidth;
iFrame.height = iFrame.contentWindow.document.body.scrollHeight;
}
window.addEventListener('DOMContentLoaded', function(e) {
var iFrame = document.getElementById( 'iFrame1' );
resizeIFrameToFitContent( iFrame );
// or, to resize all iframes:
var iframes = document.querySelectorAll("iframe");
for( var i = 0; i < iframes.length; i++) {
resizeIFrameToFitContent( iframes[i] );
}
} );
</script>
<iframe src="usagelogs/default.aspx" id="iFrame1"></iframe>Cross Domain (iFrame aus einer externen Webseite)
Wichtig: Es ist zu beachten, dass ihr Zugriff auf die externe Domain benötigt.
- Öffnet die Github-Seite: GITHUB IFRAME RESIZER
- Ladet euch die iframeResizer.min.js Datei herunter
- Ladet euch die iframeResizer.contentWindow.min.js Datei herunter
- Platziert diese Dateien auf den beiden Servern unter /themeordner/js (iframeResizer.min.js auf der Domain wo das iFrame platziert werden soll und die zweite Datei auf der externen Domain
Als nächstes müssen wir die iframeResizer.min.js auf der externen Domain implementieren. Bei WordPress geht dies so:
<script type="text/javascript" src="https://davidjbradshaw.com/iframe-resizer/js/iframeResizer.contentWindow.min.js"></script>
Wir können hier src=”Pfad zur .js Datei auf dem eigenen Server” ändern, damit keine Verbindung zu Github aufgebaut werden muss.
Um den Resizer auszuführen müssen wir nun eine iframe.js Datei in einem belieben Text-Editor deiner Wahl erstellen. Der Inhalt soll auf der Domain platziert werden auf der das iFrame dargestellt werden soll:
iFrameResize({
log : true, // Enable console logging
enablePublicMethods : true, // Enable methods within iframe hosted page
});Den nächsten Code müssen wir in der functions.php unseres Themes einfügen. Diese ist im Theme Ordner zu finden.
Solltet ihr ein Child Theme verwenden, dann muss der Code in die functions.php des Child Themes platziert werden.
function theme_name_scripts() {
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/iframeResizer.min.js ', array(), '1.0.0', true );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/iframe.js ', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );Fast geschafft! Jetzt müssen wir nur noch das iFrame im HTML Code einfügen und sind fertig.
<iframe src="https://DeineiFrameZielURL.de" width="100%" scrolling="no"></iframe>
Weitere Ressourcen
Du konntest dein Problem nicht lösen? Dann hinterlasse einen Kommentar oder schreibe uns eine Email unter bugsupport@picnature.de. Wir antworten normalerweise innerhalb eines Werktages.
