iFrame src veranderen op basis van width van de pagina

**Robbin de Kruijf** · 06-11-2013, 14:13

Ik ben opzoek naar een code die de URL van de iframe aanpast indien de pagina smaller is als xxx aantal pixels. Ik heb namelijk 2 bereken modules (desktop en mobiele versie).

Onderstaande code had ik wel gevonden maar dit kreeg ik niet werkend.

Code:

<script type="text/javascript">
$(document).ready(function() { 
  if($(window).width() < 600)   
    $('#bereken').attr("src","http://www.google.nl/"); 
  else   
    $('#bereken').attr("src","http://www.marktplaats.nl/"); 
});
</script>

PHP Code:


<div class='iframe-wrapper'>
<iframe src='https://www.sitedeals.nl' rel='nofollow' id='bereken'  frameborder='0' style='height:2500px;width:100%;'>Please upgrade your  browser</iframe>
</div>

**Tom giesbergen** · 06-11-2013, 14:20

En hiermee?

jQuery(window).resize(function () {
if (this.resizeTO) clearTimeout(this.resizeTO);
this.resizeTO = setTimeout(function () {
jQuery(this).trigger('resizeEnd');
}, 250);
});
jQuery(window).bind('resizeEnd', function () {
if ($(window).width() < 600) {
$('#bereken').attr("src", "http://www.google.nl/");
}
else {
$('#bereken').attr("src", "http://www.marktplaats.nl/");
}

});

**Robbin de Kruijf** · 06-11-2013, 14:30

Beste,

Dit werkt (bij mij) helaas ook niet.. Onderstaande heb ik nu even in een test bestand gezet.. maar helaas..

Code:

<html>
<head>
    <script type="text/javascript">
        jQuery(window).resize(function () {
            if (this.resizeTO) clearTimeout(this.resizeTO);
            this.resizeTO = setTimeout(function () {
            jQuery(this).trigger('resizeEnd');
            }, 250);
        });
        jQuery(window).bind('resizeEnd', function () {
            if ($(window).width() < 600) {
                $('#bereken').attr("src", "http://www.google.nl/");
            } else {
                $('#bereken').attr("src", "http://www.marktplaats.nl/");
            }
        }); 
    </script>
</head>
<body>

<iframe src='https://www.sitedeals.nl' id='bereken' frameborder='0' style='height:2500px;width:100%;'>Please upgrade your  browser</iframe>

</body>
</html>

**N. Kaag** · 06-11-2013, 14:52

Je vergeet jquery in te laden, wat toch wel cruciaal is.

Daarnaast sturen zowel Google als Marktplaats een X-Frame-Options-header mee met de waarde: SAMEORIGIN
Dit zorgt ervoor dat deze sites niet (dynamisch via jQuery) kunnen worden geladen via een iFrame.
Ook is het wel fijn als hij de iFrame maar 1X reload.

Houd er rekening mee dat iFrames met content van een andere website (origin) vaak niet goed samen gaan.
Bij deze de aanpassingen die ik heb gedaan om het werkend te krijgen.:

Code:

<html>
	<head>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
		var currentScreen = "sitedeals";
		jQuery(window).resize(function () {
			if (this.resizeTO) clearTimeout(this.resizeTO);
			this.resizeTO = setTimeout(function () {
				jQuery(this).trigger('resizeEnd');
			}, 250);
		});
		jQuery(window).bind('resizeEnd', function () {
			if ($(window).width() < 600) {
				if (currentScreen != 'test') {
					$('#bereken').attr("src", "http://www.test.nl/");
					currentScreen = 'test';
				}
			} else {
				if (currentScreen != 'nu') {
					$('#bereken').attr("src", "http://www.nu.nl/");
					currentScreen = 'nu';
				}
			}
		}); 
		</script>
	</head>
	<body>
		<iframe src="https://www.sitedeals.nl" id="bereken" frameborder="0" style="height:2500px;width:100%;">Please upgrade your  browser</iframe>
	</body>
</html>

**Robbin de Kruijf** · 06-11-2013, 14:58

@N. Kaag, helemaal top het werkt! Bedankt voor de heldere uitleg. De externe sites had ik even als voorbeeld gedaan maar dat worden natuurlijk mijn eigen bereken modules. Hartstikke bedankt!

**Robbin de Kruijf** · 06-11-2013, 15:36

In mijn voorbeeld deed ik standaard bij het aanroepen van de pagina sitedeals laden.. nu wil ik eigenlijk dat het script ook onLoad werkt.. als ik namelijk dit weghaal:

src='https://www.sitedeals.nl'

Dan moet ik eerst mijn browser verkleinen/vergroten zodat de jQuery aangeroepen word en er een pagina geladen word
(daarvoor word er niks ingeladen omdat er geen standaard src is). Eigenlijk moet wanneer de pagina geladen worden ook gekeken worden hoe breed de pagina is en aan de hand daarvan de desktop of mobiele versie inladen.

iFrame src veranderen op basis van width van de pagina