Iframe helyettesítése valami mással?

Iframe helyettesítése valami mással?
2016-03-18T15:10:29+01:00
2016-03-19T15:04:17+01:00
2022-12-03T09:15:40+01:00
Vikker
Sziasztok!

Szeretnék tőletek egy kis tanácsot // segítséget kérni. Nagy vonalakban vázolnám a dolgokat.

Nem vagyok egy programozó zseni, sőt igazából, amit csináltam saját magam okoskodtam ki, és biztos, hogy sokkal jobban, szebben és egyszerűbben is el lehetne végezni, de sajna önerőből alap dolgokra vagyok képes.
Lényegében van egy weboldalam, amit saját magam raktam össze, így sok html fájl van sok felé. Sajnos. Szeretném kicsit egyszerűsíteni a dolgokat. Mondjuk itt csak a technológiára szeretnék megoldást találni.
Van mondjuk egy jobb oldal, ahová van berakva három kép, egymás alá. Különböző hivatkozásokkal.
De mivel sok html fájl van és sok helyen kell szerepelni ezeknek a képeknek, ezért mindegyik lapon rajta van, viszont időnként szeretném cserélni a képet, valamint a kép hivatkozását is, ezért azt a megoldást találtam nagy nehezen, hogy iframe-el oldom meg, hogyha egyszer cserélek valamit, akkor azt ne kelljen az összes oldalon külön átírogatni egyesével. Ez a következőképpen néz ki:

<div class="jobbos"> <iframe src="mappa/lap.html" class="button tipped" data-title="{tipper szöveg}" data-tipper-options='{"direction":"bottom"}' noresize="noresize" marginwidth="0" marginheight="0" scrolling="no" style="height:333px; width:208px;"></iframe> </div>
A "jobbos" alatt CSS-ben raktam egy ilyet: "overflow-x: hidden" és "overflow-y: hidden", hogy ne jelenítse meg a görgetősávokat semelyik böngészőben.
Ugye a "lap.html"-ben külön megvan adva a saját formázása, ez mind jó és működik is minden oldalon, de valahogy nem tetszik nekem, és ráadásul ha lépkedek a "lapok" között, akkor ugye újra betölt az oldal és hát mondjuk úgy, hogy minimális "fáziskéséssel" vagyis egy kis "villanással" jelenik meg a kép. Gondolom én azért, mert be kell töltenie a másik html fájlt, adott esetben a "lap.html"-t egy másik lapra.

Kérdésem az lenne, hogy van-e rá valami más megoldás, amivel esetleg ki tudnám cserélni ezt a dolgot, vagy valahogy elérni azt, hogy adott képet, hivatkozással együtt ne kelljen teszem azt 30 lapon keresztül egyesével megváltoztatnom Mert így, ebben a formában elég egyszerű a dolog, mert csak '1 sor' az egész, és elég csak a lap.html-be babrálnom. Viszont a megjelenítés, az annyira lehet nem szép megoldás...

Köszönöm, ha foglalkozik vele valaki és hajlandó segíteni! Köszönöm előre is!
Ui.: Pls. a túlzott szakzsargont légyszi egyszerűsítsétek..
Mutasd a teljes hozzászólást!
Ha minden lapon szerepel a fenti tartalom és eltérőek a képek vagy a linkek, akkor...
Esetleg megoldás lehet egy JS-es megoldás, ahol a változható képek/linkek egy tömbben vannak, majd ez alapján a DIV-nek (minden létezhető variációban) adott azonosító alapján határozod meg a benne lévő A és IMG adatait (a tömb valamelyik elemét mint változót használod az oldal betötődése után az src és href beállítására)...
Minden lapon ezt a JS-fájlt hívod be, de csak azokat a DIV-eket teszed be a tartalomba (BODY-ba azonosító alapján), amelyiket akarod...
Ezek után, ha változtatsz valamelyik HREF-en vagy SRC-n a tömbben (a közösen használt egy JS-fájlban) az mindenhol érvényesülni fog...
Kissé nyakatekert, de ez is egy lehetőség...
Mutasd a teljes hozzászólást!

  • Gondold át az egész koncepciódat és készíts egy újat ahol:
    Készítesz egy alap fájlt, melyben benne van minden lapon használt CSS-formázás, JS-betöltés stb...
    Felbontod az oldalt header, content, footer részre és az első és harmadik blokk legyen azonos minden lapon ( még ha PHP-t használsz külön fájlban is lehet)...
    A content rész pedig vagy egyedileg minden lapnál vagy PHP-val include-olt változó tartalmi rész...
    Arra figyelj, hogy egy ID-vel rendelkező elembe beinclude-olt fájl, csak a body-ban elhelyezhető elemekből álljon!!!
    Röviden, vázlatosan ennyi, azaz meg kell tanulni bizonyos dolgokat hogy tovább léphess...
    Megj: Esetleg olvasd ezt az oldalt végig...
    Mutasd a teljes hozzászólást!
  • Én nem látok PHP utalást sehol... a leírás alapján csak html/css
    Mutasd a teljes hozzászólást!
  • Én sem, de ha jól emlékszem akkor csak feltételesen (esetleg javaslatként) írtam... 
    Mutasd a teljes hozzászólást!
  • Huhh.. Köszi, de az a helyzet, hogy megvan már az oldalam, rendesen megy. A felépítése hasonló, amit linkeltél, csak többféle adatlap van, és azokon is persze mindenhol ugyanolyan a footer és fejléc rész is, az annyira nem érdekes, mert nem változtatok rajtuk, csak az úgymond "jobboldali blokk", aminek egy sorát kiragadtam. Nagyon nem szeretném az egészet totál nulláról indítani, mert számomra így is nagyon melós volt megcsinálni.. Ezzel a dologgal működik ugyan, de nem a "legszebb". PHP-hoz totál béna vagyok, az nincs sehol az oldalamon. Mindenképp maradnék valami egyszerűbb megoldásnál, ha van, vagy lehetséges. Amúgy sorry, de mivel mondtam, hogy nem nagyon vagyok pro, nekem ez az "ID" -vel rendelkező beinclude-olt szöveg is magas .. oks, az ID-t még értem. szóval bocsi, de egy elég kezdő figurát kellene kiokosítani valahogy "józanparaszti" dologgal.. persze, ha esetleg van csak ebben a kérdésben valami példa, amit tudna valaki linkelni, az is már nagyon hasznos lenne, hogy el tudjak indulni egy úton..
    Mutasd a teljes hozzászólást!
  • Ha nem akarsz, tudsz, szándékozol PHP-val foglalkozni és meghagyod az HTML kiterjesztést/megoldást, akkor a következő kérdés:
    Ha minden iframe-be más tartalmu fájlt kívánsz behívni (ezért minden behívott fájlnak más a neve), azaz csak az adott képek és elérésük közös, akkor marad a jelenlegi helyzet...
    Ha nem így van, ahogy írtam, akkor kicsit pontosítani kellene a kiemelt kifejezésekkel kapcsolatban...
    Mutasd a teljes hozzászólást!
  • Lábbalhajtós ötlet: cserélgesd magát a képfájlt. Szóval minden oldal fixen hivatkozzon egy adott képre 1.jpg, 2.jpg, stb. és azokat egyszerűen írd felül amikor cserélni kell. Persze cifrázhatod, csinálhatod symlinkkel is, stb. az ötlet mindössze annyi, hogy a változás a fájlrendszerben történjen.
    Ez persze csak addig jó, amíg kizárólag a képeket kell cserélni. Ha pl. kattinthatóak, és a linknek is változnia kell, akkor ez sajna kevés.
    Mutasd a teljes hozzászólást!
  • Márpedig szűznek maradni és paráználkodni egyszerrre nem lehet:
    vagy kezded előlről és megcsinálod rendesen (ajaxos menüvel) vagy így hagyod és akkor villogni fog a kép minden betöltéskor.
    Mutasd a teljes hozzászólást!
  • Hali, nevezd át a fájlt *.php-ra. Az első sorba írd be:

    <?php ?>
    és az iframe helyére:

    <?php include('mappa/lap.html'); ?>
    Bár ez is elég fapados megoldás...

    Elírtad a class nevét: nem <div class = "jobbikos" > -t akartál írni?  :)
    Mutasd a teljes hozzászólást!
  • és az iframe helyére:

    És ez lesz benne...

    <?php ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Befogadó</title> </head> <body> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Befogadott</title> </head> <body> <h1>EZ volt az IFRAME tartalma... (HI-HI)</h1> </body> </html> </body> </html>
    Mutasd a teljes hozzászólást!
  • Erre nem is gondoltam, hogy az iframe is egy komplett html.
    Mutasd a teljes hozzászólást!
  • Én eddig úgy tudtam, hogy az "szokott" lenni...
    Ha tévedek bocsika...
    Mutasd a teljes hozzászólást!
  • Sőt, ha ez esetleg a unix, akkor van benne symlink is:

    ln -sf gyogyuljahiterejevel.jpg reklam_1.jpg ln -sf kettotfizetegyetkap.jpg reklam_2.jpg
    Szerk: no, nem néztem elég figyelmesen, már írtad a szimlinket.
    Mutasd a teljes hozzászólást!
  • Szia pontosabban becopy-zom, hogy hogy áll most a helyzet, talán egyszerűbb.... :
    Adott html fájl.. mondjuk index.html ebben a body részben kiemelem ide a jobb oldali részt:

    <div class="right_side"> <div class="jobbos"> <iframe src="mappa/lap1.html" class="button tipped" data-title="{tipper szöveg}" data-tipper-options='{"direction":"bottom"}' noresize="noresize" marginwidth="0" marginheight="0" scrolling="no" style="height:333px; width:208px;"></iframe> </div> <div class="jobbos"> <iframe src="mappa/lap2.html" class="button tipped" data-title="{tipper szöveg}" data-tipper-options='{"direction":"bottom"}' noresize="noresize" marginwidth="0" marginheight="0" scrolling="no" style="height:333px; width:208px;"></iframe> </div> <div class="jobbos"> <iframe src="mappa/lap3.html" class="button tipped" data-title="{tipper szöveg}" data-tipper-options='{"direction":"bottom"}' noresize="noresize" marginwidth="0" marginheight="0" scrolling="no" style="height:333px; width:208px;"></iframe> </div> </div>
    A lap1.html tartalma pedig igazából egy kép, ami hivatkozással van ellátva, semmi xtra.

    <div class="jobbpic_alap" style="height:333px; width:208px;"><a href="www.valami.hu" target="_blank"><img src="images/jobboldal/egyeskep.png" alt="kép leírása" style="margin:2px;" /></a> </div>
    értelemszerűen css-ben csak formázási dolgok vannak. Ugye ez a megoldás csak azért van, hogy 1 lapon.. mondjuk ugye a lap1.html-ben kicserélem a képet, és a hivatkozást, így az összes html-ben, ahol meg van adva ez az iFrame-es dolog, nem kell szórakozni egyesével az átírással...
    Mutasd a teljes hozzászólást!
  • Köszi, de ez sajna eleve kizárt, mert hivatkozás is van a képeken...
    Mutasd a teljes hozzászólást!
  • Szia!

    Sajna ez nem vált be.. átírtam, de sajna csak "eltűnt az éterből" az elem...

    A class neve..hááááát..... nem... nem jobbikos.... de elnevezhetjük annak is...
    Mutasd a teljes hozzászólást!
  • Bocs, én tévedtem, de most megmutatom, hogy az egyik csávó mit csinált a tárhelyen...
    Mutasd a teljes hozzászólást!
    Csatolt állomány
  • Ha minden lapon szerepel a fenti tartalom és eltérőek a képek vagy a linkek, akkor...
    Esetleg megoldás lehet egy JS-es megoldás, ahol a változható képek/linkek egy tömbben vannak, majd ez alapján a DIV-nek (minden létezhető variációban) adott azonosító alapján határozod meg a benne lévő A és IMG adatait (a tömb valamelyik elemét mint változót használod az oldal betötődése után az src és href beállítására)...
    Minden lapon ezt a JS-fájlt hívod be, de csak azokat a DIV-eket teszed be a tartalomba (BODY-ba azonosító alapján), amelyiket akarod...
    Ezek után, ha változtatsz valamelyik HREF-en vagy SRC-n a tömbben (a közösen használt egy JS-fájlban) az mindenhol érvényesülni fog...
    Kissé nyakatekert, de ez is egy lehetőség...
    Mutasd a teljes hozzászólást!
  • Ez a dolog működik.. viszont.. pár dolog... betölti az alapot, a hivatkozást, mindent. Egyszóval az egész "html"-t, amit megadtam. Kivéve a képet nem hozza be.. De hoooogy? Ha behozza a linket. A másik hátulütője az egésznek, hogy az összes html fájlomat, át kell írnom php-ra, mert másképpen semmit nem reagál. Plusz, azt a script-et amit használok "tipper"-nek se megy... De már legalább jó úton van a dolog... szóval "határeset"..
    Mutasd a teljes hozzászólást!
  • Na párszor át kellett olvasnom, hogy ki tudjak venni belőle valamit... Szóval azt mondod, hogy valami javascriptes megoldást kéne kitalálni erre? Egyszerűbb megoldás nem lehet sehogy?
    Mutasd a teljes hozzászólást!
  • Ha nem akarsz PHP-t (bár már nem tudom ), akkor mi maradhat még, csak a kliens oldal...
    Mutasd a teljes hozzászólást!
  • Próbáltam egy ilyet head részbe:

    <script> $(function($){ $('#egy').load("mappa/one.html"); $('#ketto').load("mappa/two.html"); $('#harom').load("mappa/three.html"); }); </script>
    és utána

    <div class="right_side"> <div class="jobbos"> <div id="egy" class="button tipped" data-title="{tipper szöveg}" data-tipper-options='{"direction":"bottom"}'> </div> </div> </div>
    ezzel megy, viszont most sem jeleníti meg a képet.. nem értem.. a "one.html" -ben meg van adva az img src, és sehogy, beraktam közvetlen mellé, akkor se... De a linket, css formázást, mindent visz, még az img alt tag-et is. Csak a képet nem hozza be...

    Másrészről. Ugye ez javascript,.... most egy XP-s gépen, egy Explorer 8-al, ha nem engedélyezem a javascriptet, ugye teljesen nulla. a többi böngészővel nincs baj, tudom egy elavult rendszer, de vajon mennyire problémás a dolog? Vagy ezzel ne foglalkozzak, mert úgyse használ senki már explorer 8-at, és XP-t? Én se egyébként... csak szimpla kérdés..

    Lényegében, ha szerintetek ez jó, akkor hogy oldom meg, hogy a képet is behozza? Számomra ez már rejtély..
    Mutasd a teljes hozzászólást!
  • Fel kellene raknod valahova, hogy meg lehessen nézni...
    A tippem viszont az, hogy hibás lehet valami elérési út...
    Mutasd a teljes hozzászólást!
  • Sajnos ugyanott vagyok, ahol elindultam. Igazából megoldódott közben a kép kérdés, mert valami fura oknál fogva nem hozta be a képet, viszont ha konkrét címről linkeltem neki.. Pl.: www.valami.hu/kép.jpg akkor behozta és szépen ment is minden. Mondhatni már örültem is neki, viszont, ami gyorsan lelombozott, hogy firefox, safari és exploreren jól működött, de opera és chrome-on nem jelentek meg az elemek. Semmi. Úgyhogy 1-et előre 2-őt hátra.....
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd