15. Februar 2018

jQuery:
Verwendung von DOMNodeInserted zur Anpassung dynamischer Inhalte

Manchmal ist es notwendig dynamisch erzeugte Elemente zu manipulieren, die zum Zeitpunkt von $(document).ready() oder $(window).load() noch nicht vorhanden sind. Dafür ist das Event $('body').on('DOMNodeInserted') sehr nützlich.

Im folgenden Beispiel wird ein von Magnific Popup dynamisch erzeugtes YouTube-Iframe auf die No-Cookie-Variante von YouTube geändert:

jQuery(document).ready(function($)
{
	// Event-Listener für DOMNodeInserted
	$('body').on('DOMNodeInserted', function()
	{
		// Prüfen, ob das gesuchte Iframe ins DOM eingefügt wurde
		var mfp_iframe=$(this).find('iframe.mfp-iframe');
		if(mfp_iframe.length)
		{
			// Parameter vorbereiten
			var src=mfp_iframe.attr('src');
			var src_no_cookie=src.replace('youtube.com', 'youtube-nocookie.com');

			// Iframe anpassen
			mfp_iframe.attr('src', src_no_cookie);
			mfp_iframe.attr('rel', '0');
		}
	});
});