Het gebruik van iframes kan een uitdaging zijn, vooral als het gaat om het responsive maken ervan. Gelukkig is er een oplossing: Iframe Resizer. In deze blog leer je hoe je deze tool installeert en gebruikt om probleemloos inhoud van andere pagina’s op je eigen website te tonen.

Wat is een iframe en waarom heb je een resizer nodig?

Een iframe is een HTML-element waarmee je inhoud van een andere pagina kunt insluiten op je eigen website. Hoewel dit handig is, kan het problemen veroorzaken zoals:

  • Onjuiste hoogte en breedte.
  • Geen optimale weergave op mobiele apparaten.
  • Scrollbalken die de gebruikservaring verstoren.

De Iframe Resizer biedt een elegante oplossing door automatisch de hoogte en breedte van de iframe aan te passen aan de inhoud.

Hoe werkt de iframeResizer?

Deze twee bestanden werken samen om de iframe dynamisch te laten reageren op veranderingen.

  1. iframe-resizer.child.js: Wordt toegevoegd aan de pagina waar je de iframe wilt insluiten.
  2. iframe-resizer.parent.js: Wordt toegevoegd aan de bronpagina waarvan je de inhoud insluit.

Hoe gebruik je de iFrame resizer?

  1. Bestanden downloaden

    Download iframe-resizer.child.js hier
    Download iframe-resizer.parent.js hier

  2. Iframe toevoegen aan je pagina
    Voeg het volgende HTML-fragment en script iframe-resizer.child.js toe op de pagina waar je de iframe wilt tonen:

    <iframe src="https://lifino.nl" id="myIframe"></iframe>

    <script src="iframe-resizer.child.js"></script>

  3. Script op de bronpagina plaatsen
    Op de pagina waarvan je de inhoud wilt tonen (bijvoorbeeld https://lifino.nl), voeg je de volgende regel toe en zorg je dat de iframe-resizer.parent.js geladen wordt op de pagina.

    <script src="iframe-resizer.parent.js"></script>

  4. Initialisatie iFrameResizer
    Vervolgens kun je op de hoofdpagina waar je de iframe toont, kun je de resizer intialiseren en CSS toevoegen om te zorgen dat deze volledige grootte is.

    <script>
    iFrameResize({ log: true }, '#myIframe');
    </script>


    <style>
    #myIframe { min-width: 100%; }
    </style>

Conclusie

Iframe Resizer is een krachtige en eenvoudige tool om iframes responsive te maken en naadloos in je website te integreren. Het automatisch aanpassen van de hoogte en breedte zorgt voor een optimale gebruikerservaring op zowel desktop als mobiele apparaten.

Het implementeren van Iframe Resizer vereist enige technische kennis om de JavaScript en CSS correct toe te voegen. Houd er daarnaast rekening mee dat sommige externe websites iframe-blokkades kunnen hebben, wat de werking kan beïnvloeden. Heb je vragen of hulp nodig? Neem gerust contact met ons op, we helpen je graag verder!

Vind je deze blogs interessant? Houd dan onze kennisbank in de gaten voor meer tips!

Garantie

Bij Lifino Digital Agency streven we naar 100% tevredenheid bij het laten maken van een websites. We begrijpen dat een website een belangrijke investering is en dat je hoge verwachtingen hebt. Daarom hanteren we de “Niet tevreden? Geld terug”-garantie. Om misverstanden te voorkomen, gelden hier wel een aantal voorwaarden.

Wanneer geldt de geld-terug-garantie?

  • Je hebt binnen 14 dagen na oplevering schriftelijk aangegeven waarom de website niet aan de afgesproken eisen voldoet.
  • De website wijkt af van de vastgelegde projectafspraken, zoals besproken in het offertevoorstel en de functionele beschrijving.
  • Wij hebben na je feedback minimaal één revisie gekregen om de website aan te passen aan de overeengekomen eisen.

Wanneer geldt de garantie niet?

  • Als je na de oplevering wijzigingen hebt doorgevoerd die het functioneren of uiterlijk van de website beïnvloeden.
  • Als de ontevredenheid te maken heeft met subjectieve voorkeuren die niet in de oorspronkelijke afspraken stonden.
  • Als de website wél voldoet aan de afgesproken functionaliteiten en structuur, maar je je bedenkt of de website toch niet meer nodig is of nieuwe functionaliteiten wilt toevoegen.
  • Als externe factoren, zoals hosting problemen of wijzigingen, buiten onze invloedssfeer liggen.

Hoe werkt de terugbetaling?

  • We onderzoeken eerst of de website inderdaad niet aan de gemaakte afspraken voldoet.
  • Bij terechte claims krijg je een gedeeltelijke of volledige terugbetaling, afhankelijk van de geleverde werkzaamheden.
  • In sommige gevallen bieden we een alternatieve oplossing, zoals verdere aanpassingen of een tegoed voor toekomstige diensten.

Heb je vragen over deze garantie? Neem contact op met info@lifino.nl, dan kijken we samen naar een passende oplossing.

Offerte aanvragen

We maken graag kort kennis om jouw wensen te bespreken.

We horen graag wat je nodig hebt! Vul het formulier in en we nemen snel contact met je op om je wensen te bespreken.

Kennismaken?

We maken graag kort kennis om jouw wensen te bespreken.

We maken graag kort kennis om jouw wensen te bespreken. Vul het formulier in, en we nemen snel contact met je op!