Iframe

Owned by Cecilie Eide
May 03, 2021
3 min read

Når løsningen skal implementeres i iframe er det et par steg som må gjennomføres:

  1. Sett inn kodefnutten nedenfor der hvor iframe skal være .. bytt [KONSERNID] med konsernets id (uten [ og ] ) . Dersom forhåndsbestemt høyde 1100px ikke passer så bra for den aktuelle løsningen, kan den justeres.

    Kodefnutt

    <iframe id="cvportal" width="100%" height="1100px" src="https://secure.webtemp.no/WebtempCVPortal/default.aspx?k=[KONSERNID]" frameborder="0"></iframe> <script src="https://secure.webtemp.no/WebtempCVPortal/Scripts/safaridetector.js" type="text/javascript"></script>

    (Javascriptet safaridetector sender safaribrukere videre til portalen for å starte en sesjon, og så tilbake igjen (uten at brukeren merker det), slik at portalen kan virke gjennom iframen i safari også. Dette trengs fordi safari har default slått på blokkering av 3dje parts informasjonskapsler (som sesjon i .NET applikasjoner).  Plasseringen av javascriptet er viktig. Det skal kun vises på siden som har selve iframen, så vi anbefaler å legge scripttaggen sammen med iframen i htmlkoden slik som vi har eksemplert).

  2. CV-Portalen er responsiv. Det vil si at den tilpasser visningen sin etter bredden som er tilgjengelig. Tilpass derfor Iframens container til å tillate 100% bredde, og ikke ha en fastlåst bredde, som forårsaker at alle blir tvunget til å se f.eks. ipad-visning (Se eksempel nedenfor).

 

Eksempel på side som skal implementere iframe:

Her er koden for denne siden. Til venstre er htmlkoden, mens til høyre er CSS for denne siden:

Vi gjør steg1 først, og limer inn oppgitt kodefnutt inn og bytter ut <h1>CV-Portal Iframe skal inn her!</h1>. Html vil da se slik ut:


 

Da vil siden se slik ut:

... Som man kan se, så fyller ikke iframen 100% av bredden. Dette er fordi iframen sin container (i dette tilfellet div'en med id content) er låst til vidden 960px. (Det kan du se på linje 26 i CSSen ovenfor). Vi tilpasser vidden på container til å bli 100%:

og ender så opp med det ønskelige resultatet:

 

Midlertidig Skjuling av elementer (for en enkel visning)

Det kan være ønskelig å vise f.eks. BARE listen over ledige stillinger. Det kan en gjøre ved å midlertidig skjule kolonner ved å legge til følgende elementer i adressen/url:

&hidewelcome=1
&hiderightcol=1
&hideleftcol=1
&giveregistrationwindow=1 

hidewelcome tar vekk velkomstboksen
hiderightcol tar vekk høyrekol og benytter ekstraplassen på de gjenværende elementene
hideleftcol gjør samme som right col, bare tar vekk venstre kol.

&giveregistrationwindow=1 - sender deg rett til registreringsskjemaet.

alle 3 av dem er kun midlertidige skjulinger, som bare skjuler elementet ved første sidelasting. Går en inn på noe, en stilling eller noe annet, så vil ting komme tilbake.