Iframe (beágyazott keret)
Eddig a WEB lap teljes egészében térképpel foglalkozott. Most nézzük meg azt, hogy hogyan kell meglévő web lap egy területére térképet beilleszteni a különböző szolgáltatók segítségével.
A beágyazott keret lényegében egy adott méretű elkülönülten kezelt terület, amelyben egy külső weblapot tudunk megjeleníteni. Az iframe méretét az HTML befogadó lapban kell meghatározni.
Az iframe tag paraméterei:
globális attribútumok :Olyan paraméterek (attribútumok), amelyeket minden tag esetén használhatunk: accesskey, class , contenteditable , contextmenu , dir , draggable , dropzone , hidden , id , lang , spellcheck , style , tabindex , title , translate.
src: a megjelenítendő állomány webcíme.
width: a beágyazott keret vízszintes mérete.
height: a beágyazott keret függőleges mérete.
srcdoc: a keretben megjelenő tartalom közvetlen megadása HTML kódokkal.
name: nevet adhatunk a beágyazott keretnek, hogy hivatkozhassunk rá.
sandbox: az iframe-be betöltött dokumentumra vonatkozó megszorításokat ill. engedélyeket lehet megadni benne.
seamless: új logikai típusú attribútum, melynek beállításával elérhetjük, hogy a keret tartalma úgy jelenjen meg, mintha a szülő dokumentum közvetlen része lenne.
allowfullscreen: logikai attribútum, mellyel megadhatjuk, hogy a beágyazott oldal megjelenhet-e teljes képernyőn.
pl.:
<iframe src="https://mierdekel.hu/bing/index.html" width="400" height="400" seamless>
</iframe>
<IFRAME SRC="https://mierdekel.hu/bing/index.html" STYLE="width:500px; height:400px; overflow:auto; border-style:solid; border-width:2px; border-color:#000000"></IFRAME>
EMBED (tartalom beágyazás)
Az embed külső tartalom beágyazására szolgáló tag. Ez általában más (interaktív) alkalmazás (tipikusan nem HTML-állomány). HTML5 szabvány a beágyazásra javsolt használat.
Az embed tag paraméterei
globális attribútumok:Olyan paraméterek (attribútumok), amelyeket minden tag esetén használhatunk: accesskey, class , contenteditable , contextmenu , dir , draggable , dropzone , hidden , id , lang , spellcheck , style , tabindex , title , translate.
src: a beágyazandó tartalom webcíme.
type: a beágyazandó tartalom mime-típusa.
width: a beágyazandó tartalom szélessége.
height: a beágyazandó tartalom magassága
pl..
<embed src="http://www.w3.org/html/logo/downloads/HTML5_Badge.svg" width="300" type="image/svg+xml">
<EMBED SRC="https://mierdekel.hu/bing/index.html" STYLE="width:500px; height:400px; overflow:auto; border-style:solid; border-width:2px; border-color:#000000">
Objektum beágyazás használattal is működik
<OBJECT DATA="https://mierdekel.hu/bing/index.html" STYLE="width:500px; height:400px; overflow:auto; border-style:solid; border-width:2px; border-color:#000000"></OBJECT>
OSM minta:
<iframe height="400" width="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=19.2972546935081484%2C47.59850757245689%2C18.97988545894623%2C49.60164362863992&layer=mapnik&marker=49.600075625759565%2C10.976216197013855" style="border: 1px solid black"></iframe>
MapQuest minta:
<iframe height="400" width="300" border="0" marginwidth="0" marginheight="0" src="https://www.mapquest.com/embed?center=47.42564118508169,19.210925102233887&zoom=16&maptype=map"></iframe>
MapTiler minta:
<iframe width="500" height="300"
src="https://api.maptiler.com/maps/streets/?key=ptRri5SRXyugsx5Bdomf#14.0/40.70850/-74.00603">
</iframe>
MapBox minta:
<iframe width='500' height='300' frameBorder='0'
src='http://a.tiles.mapbox.com/v3/vince78718.map-6z5j80z7.html#8/47.35710549396971/19.295889684'>
</iframe>
ESRI minta:
<iframe width="500" height="400" frameborder="0"
scrolling="no" marginheight="0" marginwidth="0"
src="http://arcgis.com/apps/Viewer/index.html?appid=1fa6b89a300c4e9ebf84613dd5c44b9f">
</iframe>
GMAP minta:
<iframe width="600" height="500" id="gmap_canvas"
src="https://maps.google.com/maps?q=budapest%2C%20k%C3%A9zdiv%C3%A1s%C3%A1rhely%20utca%20&t=&z=13&ie=UTF8&iwloc=&output=embed"
frameborder="0"
scrolling="no"
marginheight="0"
marginwidth="0">
</iframe>
Bing MAP minta:
<iframe width="500" height="400" frameborder="0" src="https://www.bing.com/maps/embed?h=400&w=500&cp=47.4309~19.203799999999987&lvl=11&typ=d&sty=r&src=SHELL&FORM=MBEDV8" scrolling="no">
</iframe>