Dynamisk høyde på iframe med Wordpress

En tråd i 'Javascript/Ajax' startet av drlinux, 2 Sep 2011.

  1. drlinux Konsulent i PHP og Linux

    Innlegg:
    269
    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;

    Kode:
    $("#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?
     
  2. Knut

    Knut Medlem

    Innlegg:
    747
  3. drlinux Konsulent i PHP og Linux

    Innlegg:
    269
    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
     
  4. jagarock

    jagarock Information Research & Analytics

    Innlegg:
    301
    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?
     
  5. drlinux Konsulent i PHP og Linux

    Innlegg:
    269
    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;

    Kode:
    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.. ;)
     
  6. Tonny Kluften

    Tonny Kluften Administrator

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

Del denne siden