ʫ

Sie haben den Artikel erfolgreich in den Warenkorb gelegt.
Was möchten Sie als nächstes tun?

Weiter einkaufen Zur Kasse

Responsive iFrame programmieren mit JavaScript (JS)

Heute sind responsive iFrames aus dem Internet nicht mehr wegzudenken. Egal ob Sie die Wettervorhersage lesen, sich ein Video anschauen oder mit einer Karte in Google Maps unterwegs sind, fast jede moderne Website verfügt über ein Bündel von responsive iFrames.

Dabei möchten wir in diesem Artikel auf die problematische Umsetzung von iFrames in Responsive Designs eingehen und eine mögliche Lösung erläutern. Am Ende des Artikels finden Sie auch unseren geprüften Quellcode in JavaScript.

Responsive iFrames - Problemstellung

Was die Verwendung von iFrames in Responsive Designs schwierig macht ist, dass iFrames an sich nicht responsive sind und das könnte bei verschiedenen Endgeräten eine wesentliche Hürde für Ihre Website darstellen. Doch was kann ich tun, damit die iFrames auch auf Responsive Designs ordentlich dargestellt werden?

Responsive iFrames - Die Lösung

Es existieren Möglichkeiten, das ein responsive iFrame nur mit purem CSS umzusetzen, diese sind jedoch nicht optimal, denn wir können auf diese Weise die ursprüngliche Größe nicht behalten (unter Umsänden wollen wir das) oder wir könnten das Verhältnis (aspectRatio) brechen. 

Indem wir unsere eigene CSS "iframeWrapper"-Klasse hinzufügen, ermöglichen wir es uns die Styles nach unseren Wünschen zu manipulieren, was die Sachen einfacher macht. Wenn nötig können wir den iFrame-Selector so anpassen, dass nicht alle aufgenommen werden, sondern wir beschränken uns nur auf bestimmte iFrames, die z.B. in sich nur "youtube", "vimeo", "google" usw. beinhalten. Mit der folgenden JS Funktion berücksichtigen wir die vorgegebenen Größen und nehmen nur dann eine Skalierung vor, wenn notwendig:

function responsiveIframes(){
	
	$(function () {
		var iframes, iframeWrapper, aspectRatio, iframeWidth, iframeHeight; // Deklarieren von Variablen
		
		iframes = $("iframe"); // Selektieren aller iframes
		iframeWrapper = "iframeWrapper"; // Die Klasse, die den iframe umhüllt
		
		iframes.not("."+iframeWrapper+" iframe").each(function() { //Selektieren aller iframes, die von der Klasse 'iframeWrapper' nicht umhüllt sind
			
			iframeWidth = $(this).width(); // wir fangen uns die iframe Breite
			iframeHeight = $(this).height(); // wir fangen uns die iframe Höhe
			if(iframeWidth>iframeHeight) // wir überprüfen ob der iframe horizontales oder vertikales Layout hat
				aspectRatio = iframeHeight/ iframeWidth; // horizontal
			else
				aspectRatio = iframeWidth/ iframeHeight; // vertikal
			
			$(this) // Für jeden iframe fügen wir data-Attribut aspectRatio сmit dem Wert aspectRatio, wir entfernen Höhe und Breite entsprechend, dann bauen diese als 'inline style' ein, Umhüllen des iframes mit einem Div mit der Klasse 'iframeWrapper'
				.data('aspectRatio', aspectRatio)
				.data('origWidth', iframeWidth)
				.removeAttr('height')
				.removeAttr('width')
				.width(iframeWidth)
				.height(iframeHeight)
				.wrap("<div class='"+iframeWrapper+"'></div>" );
		})
		
		$(window).resize(function() { // Skalieren vom Fenster
		  $("."+iframeWrapper+" iframe").each(function() { // für alle iframes in einem Element mit der Klasse 'iframeWrapper'
			var width = $(this).parent().width();
			// Breite des Elternelements (iframeWrapper)
			if(width<=$(this).data("origWidth")) {
				
				$(this)
				.width( width ) 
				.height(width * $(this).data("aspectRatio"));
			} //Kalkulieren von der Höhe entsprechend des Verhältnisses // wir checken ob die Größe des Elternteils kleiner als die Originalgröße des iframes ist, dann übernimmt der iframe die Größe des Elternteils 
			
				
		  });
		
		}).resize();// wir führen window resize durch, damit die Browserladenfunktion durchgeführt wird
		
	});
}

Dann stellen wir sicher, dass wir unsere Funktion im Fall von "$(document).ready"
aufrufen, damit alles wie geplant läuft:

$(document).ready(function() {
	responsiveIframes();
})

ACHTUNG: Auf keinen Fall nochmal in einer "$(window).resize"-Funktion aufrufen - das führt zu bodenloser Rekursion bzw. zu einer endlosen Schleife und ist nicht gut für Ihren PC!

Responsive iFrame - Schlussfolgerung

Wir haben gesehen, dass iFrames ziemlich nützlich sind und wie wir diese mit JavaScript zu unseren konkreten Zwecken stylisieren können. Trotzdem ist die pure CSS-Methode nicht auszuschließen, je nach Belieben. Deswegen möchten wir Sie in den kommenden Blogposts auch mit diesem traditionellen und unkomplizierten Verfahren bekannt machen.

Also bis zum nächsten Mal und viel Spaß beim Programmieren!

Sie benötigen Hilfe bei der Programmierung Ihrer Website? Unser Team aus professionellen Programmierern und Webdesignern unterstützt Sie gerne bei Ihrem Vorhaben!

Rufen Sie uns an: +49 21 61 - 17 77 74

û