IFRAME com 100% altuera automatikoki

Posible da zure IFRAME konponbide batzuek dinamikoki doi altuera erakutsitako edukia du.

arazoa

Utzi altuera automatikoarekin iframe, agerian eduki gisa, Zerbait errazagoa egin izan liteke, baina batzuetan ez da. Badira nabigatzaile batekin arazoak bateragarritasuna javascript propietate batzuk erabiliz, aldeak barne neurri zehazteko (pixel), adibidez, UAL etiketa P. soluzio Baliteke oraindik ez izatea betiko, baina ziur izango dute lagunduko duzu.

Kodea izan da Internet Explorer probatu 9, Firefox 14.0.1 e Chrome 21.0.1180.8.

konponbidea

aurkezten Kasu guztietan, Zure IFRAME honen antzeko zerbait izan beharko luke:

1
2
3
4
  <body>
    behean, IFRAME bat daukagu<br />
    <iframe id="iframe1" src="iframe.html" zabalera="" altuera=""></iframe>
  </body>

komentarioen: Zure IFRAME zabalera ezar dezakezu atributua erabiliz hartu beharko “zabalera”. halaber, interesgarria da, aplikazioaren arabera, erabili ezaugarriak frameborder =’0′ e korritu = 'no’, zein bitarteko “rimless” e “no barra”, hurrenez hurren.

aukera 1 – JQuery

Kasu honetan, hasiera batean, bakarra IFRAME zeinen fitxategia SRC bidez igotako da ondoan balio, zerbitzari eta domeinu berean, hortaz, Erabilera ez beste domeinuak orrialde seinalatuz. bilatzen ondoren, konbinazio bat egin nuen Interneten aurkitu gidoiak zati batekin, post amaieran erreferentziatutako. azken finean, Ez dago egoera jakin edo orri-marko pean eragiketa bermea ordaindu beharko.

zailtasun batzuk irtenbide bat iritsi behar izan nuen, Metodo .load delako() Ez zuen bezala lan Internet Explorer, erantzunak erreferentzia orria kargatu mantentzeko zirudien geroztik. Hau gailu bat erabiliz konpondu gehitu URL zenbaketa amaieran, baseada getTime no(), Hori milisegundu zenetik itzultzen 01/01/1970.

gidoia honi buruz gauza polita da hori bakarrik behar duzu HEAD zure orriaren etiketak artean jarri non IFRAME da. argi, IFRAME aldatu NAN zure, Adibidea bezala deitu nuen “#iframe1” e, azkenik, ezarri SRC orria kargatu izango duzu atributua, Adibidea bezala deitu nuen “iframe.html”. Kontuan JQuery izateko deia goiz; hori egin badu, horri ezikusia egin dezakezu.

1
2
3
4
5
6
7
8
9
10
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></gidoia>
  <gidoia mota="text/javascript">
    $(dokumentu).prest(Funtzio() {
      myIframe = $("#iframe1").Pantailazatiak("src","iframe.html?" + berriaren data().getTime());
      $(myIframe).karga(Funtzio() {          
        zen myDoc = (myIframe.zaitez(0).contentDocument) ? myIframe.zaitez(0).contentDocument : myIframe.zaitez(0).contentWindow.dokumentu;
        myIframe.altuera(myDoc.body.scrollHeight+10);
      });
    });
  </gidoia>

aukera 2 – CSS

Beste irtenbide interesgarri InHosting, CSS bakarrik erabiltzen du, eta zerbitzatu liteke bakarrik IFRAME bakar bat kargatu nahi badituzu. Zoritxarrez, oso mugatua da eta ez du ondo funtzionatuko beste helburu. kargatu ahal duzu (embed) Beste domeinu orriak.

1
2
3
4
  <estilo mota="text/css">
    html, body, div, iframe {marjina:0; padding:0; altuera:100%}
    iframe {pantaila:bloke; zabalera:100%; mugatik:bat ere ez}
  </style>

aukera 3 – Javascript

Metodo honetan, fitxategi-iturri kodea duten IFRAME barruan agertuko dira sarbidea behar duzu, gidoi bat gehitzeko. Baina erraza da, eta ondo funtzionatzen. hortaz, dago prozesu bat bi zatitan egin:

(1) Zure IFRAME ezarri duzu, antzeko zerbait:
index.html

1
2
3
4
5
...
  <body>
    <iframe id="iframe1" src="iframe.html" zabalera="" altuera=""></iframe>
  </body>
...

(2) deia Javascript egin duzu IFRAME SRC definitutako fitxategia barruan:
iframe.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
  <burua>
    <gidoia mota="text/javascript">
      leiho.onload = Funtzio(){
         guraso.dokumentu.getElementById("iframe1").altuera = dokumentu.getElementById("myDoc").scrollHeight + 35;
     }
    </gidoia>
  </burua>
  <body>
    <div id="myDoc">
       <p>Joan hemen zure testua</p>
       <p>testua</p>
       <p>testua</p>
       <p>testua</p>
       <p>testua</p>
       <p>testua</p>
       <p>testua</p>
       <p>testua</p>
       <p>testua</p>
       <p>testua</p>
       <p>testua</p>
       <p>testua</p>  
    </div>
  </body>
</html>

komentarioen: Não esqueça de alterar o ID do seu IFRAME para que getElementById() não falhe!

Caso você use outra solução mais eficiente, mesedez, compartilhe!

iturri

denera: 37409

19 berrikuspen “IFRAME com 100% altuera automatikoki

  1. Jorgeana esan:

    Testei aqui no Firefox e funcionou certinho!! No IE 10 pede pra executar um complemento activex, ai depois de permitir exibe a página corretamente, conforme o conteúdo.
    Já no Google Chrome o iframe ficou bem pequeno e não consegui ajustar
    Eu usei a opção 1 jQuery eta aldatu orrialdearen izena eta zabalera izan zen gauza bakarra =”700″.
    Edozein aholku arazoa konpontzeko?
    eskerrik asko!!

  2. Daniel Filipe esan:

    magistral aurpegia gurekin aurkezten duzu, Egun osoa eman nuen jquery batera orrikatzea sistemetan bila ez behar orri karga egiteko denbora guztian (baina oso konplexua dira), pentsatu marko batean jarri ematen dut ez bakarrik behar php eta mysql bakarrik erabiliz markoa kargatu, baina markoaren altuera zuen jipoitu. Eskerrik asko! 100%.

  3. Wesley esan:

    genial, ordu eman nituen kode bat lan egiten duen bila eta hori egin zuen lan perfektua! Orain IFRAME barnean PDF bat ireki ahal dut eta bera orriko redirect bat egin .zip bat deskargatu bitartean liburua irakurtzen.

Utzi erantzuna

Zure e-posta helbidea ez da argitaratuko. Beharrezko eremuak markatuta daude *