Inline-kehykset mahdollistavat sisällön sisällyttämisen ulkoisista lähteistä sivuillasi
Inline-kehykset, joita kutsutaan usein "iframeiksi", ovat vain HTML5: ssa sallittuja kehyksiä. Nämä kehykset ovat olennaisilta osiltaan sivusi, jonka "leikkaat". Sillä sivulla olevaan tilaan voit syöttää ulkoisen verkkosivun. Pohjimmiltaan iframe on toinen selainikkuna, joka on asetettu suoraan Web-sivusi sisälle. Näet iframeja, joita käytetään yleisesti verkkosivustoissa, joiden on sisällettävä ulkoista sisältöä, kuten Google-kartta tai YouTube-videota.
Molemmat suosituimmat sivustot käyttävät iframeja upotuskoodissaan.
IFRAME-elementin käyttäminen
Elementti käyttää HTML5-elementtejä sekä useita muita elementtejä. Neljä ovat myös määritteitä HTML 4.01:
- - kehyksen lähteen URL-osoite
- -ikkunan korkeus
- -ikkunan leveys
- -ikkunan nimi
Ja kolme uutta HTML5:
- srcdoc - kehyksen lähteen HTML. Tämä ominaisuus on etusijalla minkä tahansa urc-attribuutin URL-osoitteessa
- hiekkalaatikko - luettelo ominaisuuksista, jotka pitäisi sallia tai hylätä kehysikkunassa
- saumaton -näyttää käyttäjäagentille, että iframe olisi muotoiltu sellaiseksi, että se on näkymättömästi osa vanhemman asiakirjaa
Jos haluat rakentaa yksinkertaisen iframe-tiedoston, määrität lähdemerkinnän ja leveyden ja korkeuden:
Huomaa, että et voi käyttää pikseliarvojen käyttöä iframe-asetuksissasi, mutta voi itse päättää käyttää prosenttiosuutta.
Jos rakennat reagoivaa verkkosivustoa, jonka koon muuttaminen eri ruudun kokoilla, nämä prosentit ovat tärkeitä.
HTML 4.01: ssä on myös joitain määritteitä, mutta HTML5: ssa vanhentuneet. Koska useimmat verkkosivustot käyttävät nykyään HTML5 +: tä, nämä ominaisuudet ovat sellaisia, joita et halua käyttää (mutta jotka näet eräissä vanhojen asiakirjojen kanssa).
- -jossa, käytä A-elementtiä linkitykseen kuvaukseen
- - aseta CSS float -ominaisuus
- allowtransparency -asema, käytä CSS-taustaominaisuutta iframe-läpinäkyvyyden tekemiseen
- - Käytä raja-CSS-ominaisuutta
- marginaalivaihtoehto , käytä CSS-margin-ominaisuutta
- marginaalivaihtoehto , käytä CSS-margin-ominaisuutta
- -jossa, käytä CSS-ylivuoto-ominaisuutta
IFRAME -selaimen tuki
Kaikki modernit selaimet tukevat IFRAME-elementtiä:
- Android
- Kromi
- Firefox
- Internet Explorer 2+
- iOS / Safari Mobile
- Netscape 7+
- Opera 3+
- Safari
Jos yllä olevassa luettelossa ei näytetä versionumeroa, koska selaimen kaikki versiot tukevat sitä.
Yksi asia on muistaa, että vaikka kaikki selaimet tukevat IFRAME-elementtiä, joitain HTML5-ominaisuuksia on vielä rajoitettu.
- Ylivuotojen käyttäminen vierityksen vierittämiseen ei ole luotettava. Jos et halua vierityspalkkeja iframe-laitteistasi, käytä vieritysominaisuutta edelleen.
- Selaimet eivät tällä hetkellä tue srcdoc-, sandbox- ja saumattomia attribuutteja.
Linkki Iframien kanssa
Kun annat iframeille nimesi tai tunnuksesi, voit osoittaa linkit kyseisellä kehyksellä A-elementin attribuutilla. Kun käyttäjä napsauttaa linkkiä, se avautuu viitattujen iframe-kehysten sijaan nykyisen ikkunan sijaan.
Kokeile itseäsi. Kirjoita seuraava teksti verkkosivulle:
Jos IFRAMEssa avaamassa asiakirjassa ei ole asetettuja tavoitteita , kaikki nämä linkit avautuvat samalla iframe -muodossa kuin vanhemman asiakirja.
Voit käyttää tätä toimintoa, jos linkit yhdellä IFRAME-sivulla muuttavat toisen IFRAME-sisällön samalla sivulla.
IFrames ja Security
IFRAME-elementti sinänsä ei ole tietoturvariski sinulle tai lukijoille.
Valitettavasti iframeit ovat saaneet huonoa mainetta, koska niitä voi käyttää haitallisilla verkkosivustoilla sisältämään sisältöä, joka voi tartuttaa kävijän tietokoneen ilman, että he näkevät sivulla. Tämä tapahtuu siten, että linkit osoittavat näkymätöntä IFRAME-ohjelmaa ja nämä komentosarjat asettavat haitallisen koodin. Käyttäjä napsauttaa linkkiä ja ajattelee, että linkki on rikki, koska mitään ei näyttänyt tapahtuneen, mutta komentosarja lähti liikkeelle, jossa he eivät nähneet sitä.
Myös tietokoneviruksia, jotka injektoivat näkymätön IFRAME verkkosivuihisi, tehokkaasti kääntävät verkkosivustosi botnetiksi. He voivat tehdä tämän SQL-injektioiden ja muiden hyökkäysten kautta.
Muistettavaa, kun sisällytät IFRAME-sivusi verkkosivustossasi on, että käyttäjät ovat yhtä turvallisia kuin kaikkien linkitettyjen sivustojen sisältö. Jos sinulla on syytä tuntea, että sivusto on epäluotettava, älä liitä sitä mihinkään muuhun tarkoitukseen ja ehdottomasti siihen ei sisälly sisältöä IFRAME. Linkittäminen omille sivuillesi iframeissa ei kuitenkaan aiheuta tietoturvariskiä käyttäjälle tai käyttäjälle.
Alkuperäinen artikkeli Jennifer Krynin. Edited on 11/7/16 by Jeremy Girard