Dynamisk høyde på iframe med Wordpress

[drlinux]

Hei,

Jeg trenger å inkludere en WP-installasjon i et eksisterende design, og dette er gjort med en iframe. Det fungerer ganske greit, bortsett fra at høyden på iframe er statisk.

Den har fått en stor statisk høyde siden height: 100% ikke fungerer.

Det skal være mulig å dynamisk justere høyden på iframe ved å sette den tilsvarende scrollHeight fra iframens innhold;

$("#wpIframe").bind("load", hoydeIframe('wpIframe'));
       
        function hoydeIframe(iframeName){
            var the_height= document.getElementById(iframeName).contentWindow.document.body.scrollHeight;
        
            document.getElementById(iframeName).height=the_height + 'px';
        }

Dette fungerer i Chromium, men jeg har ikke fått det til å virke i noen versjoner av FF. Det fungerer også bare på første last av siden, og ikke hvis man klikker på en artikkel inne i iframe.

Er det noen som har vært borte i dette før, og som har fått det til å fungere?

 

[Knut]

How to dynamically adjust an iframe’s height kanskje

 

[drlinux]

Takk, men har sett den før Har googlet meg grønn på dette.. Det funker nå i IE og Chrome, men FF returnerer clientHeight, og ikke scrollHeight

 

[jagarock]

ah husker jeg brukte lang tid på dette for noen år siden.
husker ikke hvordan det ble løst men. det tok lang tid!
måtte ihvertfall skille på de forskjellige browserne og hente de riktige tallene.

såvidt jeg veit så kan du vel trigge jquery når innholdet i iframen blir endret, kan du ikke? og da isåfall putte på ny height på iframen?

 

[drlinux]

Det jeg endte opp med å gjøre var å legge inn litt kode i footer på WP, slik at det ble kjørt når siden var lastet;

GetContainerSize();

function GetContainerSize () {
            var iframe = window.parent.document.getElementById("wpIframe");
            if (!iframe) {
                // For å unngå feil hvis ikke i iframe
                return;
            }
            
            iframe.height = 800; // For å nullstille hvis gammel høyde i iframe er stor
            
            var the_height=document.documentElement.scrollHeight;
            var nyHoyde = parseInt(the_height) + 50; // Legg til litt for padding og marginer
            iframe.height=nyHoyde;
}

I tillegg måtte jeg fjerne height: 100% fra WP's stylesheet. Det gjorde nemlig at iframe ikke ble redusert. Tok meg litt tid å oppdage det..

 

[Tonny Kluften]

Takk for at du poster løsningen. Slike iframeutfordringer kan ta knekken på noen og enhver.