Fancybox med iframe: Dynamisk størrelse

Fancybox er et populært jQuery-plugin, der bruges til at vise indhold i en modal overlay, ofte kaldet en popup. Det er især nyttigt til at vise billeder, gallerier og eksternt indhold via iframes. Mens Fancybox er utroligt alsidigt, kan det være en udfordring at håndtere dynamiske størrelser for iframes, især når du har brug for at tilpasse popup-vinduets dimensioner baseret på indholdet i iframen. Denne artikel vil guide dig gennem processen med at initialisere en Fancybox-popup med en iframe og dynamisk indstille dens størrelse ved kørselstidspunktet ved hjælp af jQuery.

Grundlæggende Fancybox Initialisering med iframe

Før vi dykker ned i den dynamiske størrelse, lad os først se på den grundlæggende måde at åbne en iframe i en Fancybox. Du skal have jQuery og Fancybox-pluginet inkluderet i din HTML-fil. Derefter kan du bruge følgende jQuery-kode:

$(".fancybox-iframe").fancybox({ type: 'iframe', iframe: { preload: false // Undgå at indlæse iframe før Fancybox er åben } });

I dette eksempel antager vi, at du har et link eller en knap med klassen .fancybox-iframe, der peger på den URL, du vil indlæse i iframen. Nu til udfordringen: at ændre størrelsen dynamisk.

Dynamisk Størrelse af Fancybox iframe

Ofte vil indholdet af din iframe variere i størrelse, og du ønsker, at Fancybox-popupen skal tilpasse sig dette indhold. Den mest effektive måde at opnå dette på er ved at kommunikere fra iframen tilbage til den side, der hoster Fancybox (hovedsiden).

Lad os forestille os, at du har to sider:

• MainPage.aspx: Denne side indeholder et link, der åbner Fancybox-popupen med en iframe.
• Demo.aspx: Denne side er den, der indlæses i iframen.

Trin 1: Initialiser Fancybox på MainPage.aspx

På din MainPage.aspx skal du have et element, der udløser Fancybox. Dette kan være et link:

<a class="fancybox-iframe" href="Demo.aspx?width=800&height=600">Åbn Demo</a>

Her har vi tilføjet query-parametre til URL'en for at angive den ønskede bredde og højde. Selvom dette er en måde at sætte en fast størrelse, er det ikke dynamisk ved kørselstidspunktet baseret på iframens faktiske indhold.

Trin 2: Implementer Funktionaliteten til Dynamisk Størrelse

For at opnå dynamisk størrelse skal vi have en funktion på MainPage.aspx, som Demo.aspx kan kalde. Denne funktion vil tage URL'en og de ønskede dimensioner som argumenter.

Tilføj følgende JavaScript-funktion til din MainPage.aspx:

function SetFancySizeDynamic(pageUrl, width, height) { $.fancybox.open({ type: 'iframe', src: pageUrl, iframe: { preload: false }, width: width, // Sæt den ønskede bredde height: height, // Sæt den ønskede højde afterLoad: function(instance, slide) { // Opdater størrelsen efter indlæsning for at sikre korrekt visning instance.width = width; instance.height = height; } }); }

Denne funktion SetFancySizeDynamic er designet til at blive kaldt fra iframen. Den bruger $.fancybox.open til at åbne en ny popup med de specificerede dimensioner. `afterLoad` callback bruges til at sikre, at dimensionerne anvendes korrekt efter indlæsningen.

Trin 3: Kald Funktionaliteten fra Demo.aspx

Nu skal du kalde denne funktion fra din Demo.aspx-side, når du vil have popupen til at ændre størrelse. Dette gøres ved at tilgå window.parent, som refererer til vinduet, der indeholder iframen (MainPage.aspx).

Tilføj følgende JavaScript i din Demo.aspx:

// Antag at du ønsker at sætte størrelsen til 800px bred og 600px høj var desiredWidth = 800; var desiredHeight = 600; var currentPageUrl = window.location.href; // Kald funktionen på hovedsiden for at åbne eller opdatere Fancybox window.parent.SetFancySizeDynamic(currentPageUrl, desiredWidth, desiredHeight);

Her sender vi den aktuelle URL for Demo.aspx og de ønskede dimensioner til SetFancySizeDynamic-funktionen på hovedsiden. Dette vil åbne en ny Fancybox-popup (eller opdatere en eksisterende, afhængigt af din implementering) med den angivne størrelse.

Alternative Metoder og Overvejelser

Brug af `parent.jQuery`

Hvis din MainPage.aspx og Demo.aspx kører på forskellige domæner, vil Same-Origin Policy forhindre direkte kommunikation. Men hvis de kører på samme domæne, kan du bruge parent.jQuery til at få adgang til jQuery-instansen på hovedsiden.

// Fra Demo.aspx parent.jQuery.fancybox.open({ type: 'iframe', src: window.location.href, iframe: { preload: false }, width: 800, height: 600 });

Automatisk Justering af Højden

En almindelig udfordring er at få iframens højde til at matche dens indhold automatisk. Fancybox har ikke en indbygget funktion til dette, men du kan opnå det ved at sende information om indholdets højde tilbage til hovedsiden.

På Demo.aspx:

function adjustFancyboxHeight() { var contentHeight = $("body").outerHeight(); // Få den faktiske højde af iframens indhold window.parent.postMessage({ type: 'resize', height: contentHeight }, '*'); // Brug '*' eller den specifikke oprindelse for sikkerhed } // Kald adjustFancyboxHeight() efter indholdet er indlæst i Demo.aspx $(document).ready(function() { adjustFancyboxHeight(); });

På MainPage.aspx, tilføj en event listener til at modtage beskeden:

window.addEventListener('message', function(event) { if (event.data.type === 'resize' && event.originalEvent.origin === 'http://your-domain.com') { // Tjek oprindelsen var iframeHeight = event.data.height; // Find den aktive Fancybox-instans og opdater dens højde $.fancybox.getInstance().updateDimensions({ height: iframeHeight }); } });

Denne metode bruger window.postMessage til sikker kommunikation mellem vinduer, selvom det er mere komplekst. Den kræver, at du har en event listener på hovedsiden til at modtage beskeden og derefter opdaterer Fancybox-instansens dimensioner.

Tabel Oversigt

Ofte Stillede Spørgsmål

Hvordan initialiserer jeg en Fancybox med en iframe?

Du bruger $.fancybox.open({ type: 'iframe', src: 'din_url.html' }); i jQuery.

Hvordan sætter jeg størrelsen på en Fancybox iframe dynamisk?

Du kan definere en funktion på din hovedside, som iframen kan kalde med de ønskede dimensioner, f.eks. window.parent.SetFancySizeDynamic(url, width, height);.

Kan jeg få iframens højde til at matche indholdet automatisk?

Ja, du kan sende iframens indholds højde til hovedsiden ved hjælp af window.postMessage og derefter opdatere Fancybox-instansens dimensioner.

Hvad hvis mine sider er på forskellige domæner?

Hvis siderne er på forskellige domæner, kan du ikke bruge direkte DOM-manipulation eller kalde funktioner direkte. Brug window.postMessage til sikker kommunikation, men vær opmærksom på Same-Origin Policy.

Hvordan undgår jeg, at iframen indlæses for tidligt?

Brug optionen iframe: { preload: false } i din Fancybox-konfiguration.

Hvordan opdaterer jeg størrelsen på en allerede åben Fancybox?

Du kan bruge $.fancybox.getInstance().updateDimensions({ width: newWidth, height: newHeight }); for at ændre størrelsen på den aktuelle Fancybox-instans.

Konklusion

At håndtere dynamiske størrelser for Fancybox iframes kan være en smule tricky, men ved at bruge JavaScript-kommunikation mellem vinduer kan du opnå en fleksibel og brugervenlig oplevelse. Ved at implementere en funktion på din hovedside, som din iframe kan kalde, kan du effektivt kontrollere størrelsen på din popup baseret på indholdet. Husk at overveje sikkerhed og browserkompatibilitet, især når du arbejder med iframes og krydsdomæne-kommunikation.

Hvis du vil læse andre artikler, der ligner Fancybox med iframe: Dynamisk størrelse, kan du besøge kategorien Teknologi.