HTML5 lost al uw iframe problemen opHTML5 alternatieven voor iframes

de <iframe> tag is nog steeds prima bruikbaar en geldig binnen de HTML5 specificaties, maar voor sommige toepassingen is het niet aan te raden om een iframe te gebruiken. Hou er rekening mee dat zoekmachines moeite kunnen hebben met iframes, wat betekent dat het een negatieve impact kan hebben op je SEO. Iframes hebben ook nog wel eens de neiging om eigen scrollbars te introduceren, waardoor scrollen door een website soms een drama wordt. CSS kan niet gebruikt worden om de content binnen de iframe aan te passen, waardoor je website er raar uit kan gaan zien.

Hier een paar alternatieven voor iframes

AJAX/Jquery

Je kan met eenboudige jquery de inhoud van een andere pagina inladen in een DIV element. Zoals in dit voorbeeld:

<div id="voorbeeld"></div>

$(document).ready(function() {


   $('#voorbeeld').load('hatseflats.html', function() {
alert
('gelukt?');


});


});

HTML5 Web Components

Je kan met HTML Imports eenvoudig HTML documenten incusief CSS, JQuery en alle andere zooi die in een .html kan zitten embedden op je pagina. Zoals in dit voorbeeld:

<!-- Bronnen vanaf een andere website moeten wel CORS-enabled zijn -->
<link rel="import" href="http://voorbeeld.nl/hatseflats.html">

Objects

Een andere mogelijkheid om externe content in je website op te nemen is door objects te gebruiken. W3C raad dit niet aan, en zegt zelfs dat het er niet voor bedoeld is, maar het werkt wel. ­čÖé

Zoals in dit voorbeeld:

<object data="http://www.voorbeeld.nl" width="600" height="400">
    <embed src="http://www.voorbeeld.nl" width="600" height="400"> </embed>
    Error: Embed is niet gelukt!.
</object>

 

API’s

Als het je alleen om de data te doen gaat, dan kan je ook kijken of er via een API de data te verkrijgen is. Vaak is de benodigde data eenvoudig op te halen in een JSON bestand en kan je er mee doen wat je wilt. Google, bijvoorbeeld, biedt veel van dit soort API’s aan die gratis te gebruiken zijn.

 

...