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

Wenn wir ein iFrame auf unserer WordPress Webseite einbauen wollen, ist es wichtig darauf zu achten 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 habt.

 

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.


Schreibe einen Kommentar

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