ugrás a tartalomhoz

HTML5 enabling script 2.0

hunkris · 2012. Szep. 13. (Cs), 15.36
Régebben volt szó a HTML5 enabling script azon problémájáról, hogy sok memóriát eszik.

Erre találtam most egy (fél)megoldást. Az alapelv az, hogy a javascript csak akkor készíti el a HTML5-ös tagot, ha a HTML forrásban le van definiálva.

Példa egy nav elemmel:

<nav id="nav">...</nav>


if (document.getElementById('nav')) {
    document.createElement('nav');
}
Tehát van egy nav elemünk, ami IE9 előtt is megy (ahol a sima enabling srcipt).
Mit szóltok hozzá? Ha szerintetek érdemes, megvalósítom és felteszem valahova.
Építő jellegű kritikát szívesen hallanék, mivel csak futtában ismerem a javascriptet.

Üdv: hunkris
‹ JavaScript billentyű események feltört honlap ›
 ■
1

Probléma

Poetro · 2012. Szep. 13. (Cs), 16.00
Én úgy emlékszem, hogy ezzel van egy nagyobb probléma. Hogy ha az elem már benne van a DOM-ban, akkor utólag nem tudod CSS-sel formázni, mindenképpen előbb kell egy shim. Ráadásul a probléma csak IE8- esetén jelentkezik, ezért csak ebben az esetben kell a szkriptet behúzni, erre pedig IE-nek van conditional comment-je.
2

Szerintem

hunkris · 2012. Szep. 13. (Cs), 16.21
Ez egy shim (a HTML5shimre gondoltál?) variáns lenne.
Ha valaki XP-s, értékelném, ha letesztelné IE8-ban. Win7-re nem hiszem, hogy felmegy.
LT IE9-es, esetleg IE8-as CC-vel kellene beszúrni.

Valakinek van jobb ötlete, mint az ID-s keresés?
Javascriptben lehet tagokat keresni, vagy csak ID-t lehet?
3

getElementsByTagName és nem

Poetro · 2012. Szep. 13. (Cs), 16.26
getElementsByTagName és nem csak JavaScriptben, hanem rengeteg XML függvénykönyvtárban is.
6

Köszönöm

hunkris · 2012. Szep. 13. (Cs), 16.58
Köszönöm, bár jobban belegondolva, ha egy oldalon több tag van, akkor többször hozza létra az elemet, az pedig nem túl jó az optimalizációs szempontból.

Az IE8-as js motor ismeri az olyan tagokat, amik nincsenek még ledefiniálva neki? Ez is buktató lehet.
12

A multimegcsinálás ellen

hunkris · 2012. Szep. 14. (P), 21.45
A multimegcsinálás ellen jutott eszembe ez a megoldás:

var navelem = 0;

if (navelem = 0) {

if (document.getElementByTagName('nav')) {  
    document.createElement('nav');  
    }

navelem = 1;
}
De még mindig nem tudom, hogy működne-e IE8 alatt (gondolom rájöttök miért).
13

Nem

Poetro · 2012. Szep. 14. (P), 22.13
Ez valami barchoba? Ráadásul elgépelted a függvény nevét.
14

Hoppá

hunkris · 2012. Szep. 14. (P), 23.03
Hoppá, köszönöm hogy szóltál, egy s lemaradt.

Hogy érted a barchobát?
15

Barchoba

Pepita · 2012. Szep. 15. (Szo), 01.19
De még mindig nem tudom, hogy működne-e IE8 alatt (gondolom rájöttök miért).
Szerintem erre értette (én is).
18

Egyelőre két ok miatt nem

hunkris · 2012. Szep. 15. (Szo), 17.36
Egyelőre két ok miatt nem működhet(ne).

Az első az, hogy a Js-ről THML-re ugrálva ide oda fel tudná-e dolgozni helyesen.
A második meg, mint már kérdeztem, nem tudom, hogy az IE8-as js motor is csak azokat a tagokat ismeri fel, mint a böngésző. Mert akkor szintén kuka.
17

Tesztelted is az ötletedet?

kuka · 2012. Szep. 15. (Szo), 12.35
Tesztelted is az ötletedet? Például egy ilyen utasítással:
if (document.getElementsByTagName('weblabor')) console.log('Találva!?')
Ustak tagtársunk A JavaScript metaprogramozása cikkében olvasd el A hat kis hamis című részt. Ha eléggé figyelsz észre fogod venni, hogy az üres tömb nem hamis, tehát minden tömb igaz.
19

Sajnos nem volt alkalmam

hunkris · 2012. Szep. 15. (Szo), 17.40
Sajnos nem volt alkalmam IE8-on tesztelni, a többiben meg nincs értelme.

Egébként, köszönöm a linket, ez a cikk eddig kimaradt.
4

Nem érdemes

Hidvégi Gábor · 2012. Szep. 13. (Cs), 16.31
Egy <nav> elem semmilyen többletinformációt nem hordoz egy <div> vagy <ul>-hez képest, ezért teljesen fölösleges a használata.
5

Még nem. De azt hallottam,

hunkris · 2012. Szep. 13. (Cs), 16.55
Még nem. De azt hallottam, hogy a felolvasóprogramok majd valamikor, a távoli jövőben támogatni fogják, és ez sokat jelent ott, hisz tudják, hol a navigációs rész.
7

role

Hidvégi Gábor · 2012. Szep. 13. (Cs), 17.19
A role attribútumot már évek óta támogatják.
8

És tudtommal felismerik

Pepita · 2012. Szep. 14. (P), 00.27
És tudtommal felismerik a <div id="nav"> alakot is.
9

Cél?

Pepita · 2012. Szep. 14. (P), 00.38
Mi a célod a tag-ek másolásával? Mert ugye az így létrehozott tartalmat sokan (pl. keresőmotorok) nem "látják".
Ezenkívül a HTML5/CSS3 jó ideig csak szép álom és nyűglődés marad, de szerintem értelmes szabvány sose lesz belőle.

Ha ilyesmibe fogsz, javaslom előbb a DOM és függvényei alaposabb tanulmányozását.
10

Cél

Hidvégi Gábor · 2012. Szep. 14. (P), 11.33
Szeretné, ha régi Explorereken is működnének a HTML 5-ös új tag-ek, és lehetőleg minél kevesebb overhead-del.
11

Szabvány

hunkris · 2012. Szep. 14. (P), 13.17
Pepita, köszönöm a linket.

A HTML5 újításai tényleg elhanyagolhatók, ennek ellenére a vállalkozó jellegű emberek néha használják.
És ahogy Gábor mondta, azt próbálom megcsinálni, hogy kevesebb RAM-ot egyen az enabling script. Ez nem egy nagyszabású projekt lenne, csak egy amolyan runout, teszt.
16

Nagy falat

Pepita · 2012. Szep. 15. (Szo), 01.37
Ezek szerint arról van szó, hogy egy (több) nem általad írt HTML-t vagy sablont kell működésre bírj IE alatt? Én is szoktam olyasmit csinálni, ami tulajdonképp már van, csak nekem nem tetszik (pl. épp a mérete stb. miatt). Ekkor nekem (itt) mindig sokan mondják, hogy ne akarjak spanyolviaszt...

Nem tudom, hogy fogsz-e tudni jobbat (kisebbet) csinálni a meglévőknél, mindenesetre jó nehéz feladat, ha lesz eredmény, szívesen látnám.

Azt a megközelítésedet még mindig nem értem, hogy ha van nav elem, akkor létrehozol mégegyet. Pont az lenne a lényeg, hogy mást hozz létre helyette, pl. div-et. Azt viszont nem tudom, hogy IE alatt a getElementsByTagName megtalál-e olyan tag-et is, amit IE nem jelenít meg. Ha nem, akkor sajnos végig kell replace-eljed a body-t szövegesen. Legalábbis jobb megoldást most nem tudok.
Szerk.: és mindezt akkor, ha a teljes HTML betöltődött!

(Egyébként a getElementsByTagName egy helyen el van írva - u.úgy - a linkelt oldalon is. :))
20

Lehet, hogy az én logikámban

hunkris · 2012. Szep. 15. (Szo), 17.52
Lehet, hogy az én logikámban van a baj, de ha jól tudom, a böngészők az ismeretlen elemeket figyelmen kívül hagyják, néhol még formázni sem engedik, mint az IE8.
Erre van a HTML5-ös enabling script, ami "megtanítja" az Ie-nek az elemet, hogy formázni lehessen.

Próbálom megoldani, hogy csak azt "tanítsa meg" neki, amit "használ is", tehát benne van a forrásban, így csökkentve a memóriaszükségletet.

Viszont a harmadik bekezdésed hatására eszembe jutott, hogy mi lenne, ha nem "betanítanánk neki", hanem kicserélnénk bizonyos elemeket bizonyos elemekre, mint a navot a divre. Ezzel persze odavész a szemantika, de mivel csak IE8 alatt lenne más, ezért még tűrhető.

Mivel még mindig csak futtában ismerem a JS-t, utána fogok olvasni, hogy ki lehet-e így cserélni a forráskódot, meg majd valamikor a C++ után nekiállok komolyabban foglalkozni vele.
21

Nem mindegy,

Pepita · 2012. Szep. 15. (Szo), 23.50
hogy "figyelmen kívül hagyják", vagy benne sincs a DOM-fában. Erre utaltam.

Fentebb láttam, hogy nem elég true/false ellenőrizni a tömböt (én nem is szúrtam ki :( ). Akkor ki kell vegyed változóba, és meg kell nézzed, hány db van belőle. Itt olyan értelemben be is buktad a dolgot, hogy ha nincs belőle egy példány sem, attól még lehet, hogy megjelenítené (et vica versa). Tehát - szerintem - csak úgy tudod megoldani, hogy X elemeket keresel és Y elemre cseréled. Nem olyan szép, de működő megoldás. (Egyébként nem olyan sok HTML5 elem van, ami nem mindenütt műxik, a gond inkább az, hogy különfélék, meg a CSS-t is megfelelően le kell kezelni.)

Ha az adott oldal használ jquery-t, akkor azzal könnyebb lesz a CSS-t átírni, ill. esetleg az elemkeresésben is jobb lehet. De külön ezért jqery-t is rátölteni - u.ott fogsz tartani (méretben, stb.), mint a "kapható" HTML5-tanító szkriptek.

A HTML forrást úgy alakítod js-el, ahogy akarod. Csak az ilyen "szöveges" átalakítással nagyon vigyázni kell, nehogy hibás HTML legyen az eredmény. Ha lesz időm, ránézek, hogy meg lehet-e találni DOM fv-el pl. a nav elemet IE8 alatt.