iFrame Resizer WordPress Tutorial für iFrames mit automatischer Höhenanpassung

Share on facebook
Share on whatsapp
Share on email

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.

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.

Subscribe to our Newsletter

Klicken Sie den Bearbeitungs-Button um diesen Text zu verändern. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Share this post with your friends

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on reddit
Share on xing

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.