Forum » Programiranje » javascript, greasemonkey: kako najti element in zamenjati sliko/link v htmlju
javascript, greasemonkey: kako najti element in zamenjati sliko/link v htmlju
Vapo1 ::
v osnovi kaj bi rad:
da greasemonkey iz diska prebere txt file v katerem so linki in potem ko se nalozi site pogleda ce je kaksen izmed linkov na siteu tudi v txtju in mi nekako oznaci ta link
to bi rad da naredi tako da zraven lina doda sliko (recimo sliko kljukice ki ponazarja da je ta link ze v txtju)
ali pa ce link ze ima v htmlju svojo sliko - da spremeni to sliko
zaenkrat mi tole deluje:
ta koda zamenja prvo sliko trenutno na slotech siteu (neka faca nekoga) z sliko google logota
ok... torej rata mi najti slike in jih potem modificirat ('//img[@src]') .. nevem pa kako vstaviti novo sliko zraven texta oz linka...
problem je tudi recimo kako takle nink shendlat:
//kako poiskati po "href" in potem zamenjati "img src" .... po href ze znam poiskati vse elementa "a" ('//a[@href]') ... ampak potem kako dobiti pripadajoci element "img src" (drugace same elemente img znam poiskati - koda na vrhu posta)
nov sem v tem... hvala
da greasemonkey iz diska prebere txt file v katerem so linki in potem ko se nalozi site pogleda ce je kaksen izmed linkov na siteu tudi v txtju in mi nekako oznaci ta link
to bi rad da naredi tako da zraven lina doda sliko (recimo sliko kljukice ki ponazarja da je ta link ze v txtju)
ali pa ce link ze ima v htmlju svojo sliko - da spremeni to sliko
zaenkrat mi tole deluje:
var allImgs,thisImg; allImgs = document.evaluate('//img[@src]', document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); for (var i=0;i<allImgs.snapshotLength;i++) { var thisImg = allImgs.snapshotItem(i); var src = thisImg.src; var srcMatch = src.match('^http://static.slo-tech.com/39746.jpg'); if (srcMatch != null) { //alert("got match"); thisImg.src = 'http://www.google.si/images/nav_logo7.png'; }
ta koda zamenja prvo sliko trenutno na slotech siteu (neka faca nekoga) z sliko google logota
ok... torej rata mi najti slike in jih potem modificirat ('//img[@src]') .. nevem pa kako vstaviti novo sliko zraven texta oz linka...
problem je tudi recimo kako takle nink shendlat:
<a href="/clanki/09010/" title="All your firmware are belong to us"><img width="60" height="60" src="http://static.slo-tech.com/39746.jpg" alt="All your firmware are belong to us" /></a>
//kako poiskati po "href" in potem zamenjati "img src" .... po href ze znam poiskati vse elementa "a" ('//a[@href]') ... ampak potem kako dobiti pripadajoci element "img src" (drugace same elemente img znam poiskati - koda na vrhu posta)
nov sem v tem... hvala
nimbix ::
Link poiščeš na podoben način, kot iščeš že zdaj slike, z '//a'. Potem pa narediš nekaj takega (ni testirano):
Metoda insertAfter ne obstaja, tako da moraš zaradi tega malo kombinirati insertBefore / appendChild.
Zgornji primer ti doda sliko takoj za linkom, torej na sliki ne bo več linka. Če želiš link tudi na sliki, potem celotni if/else zamenjaš z link.appendChild(slika).
var slika = document.createElement('img'); slika.src = "http://blablabla"; if (link.nextSibling) { link.parentNode.insertBefore(slika, link.nextSibling); } else { link.parentNode.appendChild(slika); }
Metoda insertAfter ne obstaja, tako da moraš zaradi tega malo kombinirati insertBefore / appendChild.
Zgornji primer ti doda sliko takoj za linkom, torej na sliki ne bo več linka. Če želiš link tudi na sliki, potem celotni if/else zamenjaš z link.appendChild(slika).
Vapo1 ::
ok.... uspelo mi je..
torej vidim da obstaja cel kup funkcij ...
getElementsByTagName
parentNode
insertBefore
appendChild
firstChild
etc etc..
hvala nimbix.... vprasal pa bi se kako preberem text file iz diska (na vrhu v prvem postu sem napisal zakaj to rabim) ?
zdaj pa se to ... jaz sem pac instaliral greasemonkey in zdaj v text editorju neki napamet pisem kodo in probavam na slepo.... malo po internetu tu in tam dobim kaksno uporabno funkcijo (kot se je tu zgodilo) in se sreca da je javascript podoben c# kjer sem domac...
uglavnem zanima me kje dobim spisek vseh teh funkcij ... in kaksno orodje naj si dljam na priatebay da lahko normalno programiram in debugam javascript.... c# programiram v VS 2008
hvala
var divi = document.getElementsByTagName("div")[0]; var aji = divi.getElementsByTagName("a"); for (a in aji) { if(aji[a].href == "http://blabla.com"){ aji[a].firstChild.src = "http://www.google.si/images/nav_logo7.png"; //alert("done"); }
torej vidim da obstaja cel kup funkcij ...
getElementsByTagName
parentNode
insertBefore
appendChild
firstChild
etc etc..
hvala nimbix.... vprasal pa bi se kako preberem text file iz diska (na vrhu v prvem postu sem napisal zakaj to rabim) ?
zdaj pa se to ... jaz sem pac instaliral greasemonkey in zdaj v text editorju neki napamet pisem kodo in probavam na slepo.... malo po internetu tu in tam dobim kaksno uporabno funkcijo (kot se je tu zgodilo) in se sreca da je javascript podoben c# kjer sem domac...
uglavnem zanima me kje dobim spisek vseh teh funkcij ... in kaksno orodje naj si dljam na priatebay da lahko normalno programiram in debugam javascript.... c# programiram v VS 2008
hvala
nimbix ::
1. Direktno nalaganje z diska v greasemonkeyu kolikor vem ni mogoče. Lahko pa normalno nalagaš datoteke iz lokalnega web strežnika. Narediš npr. da je datoteka s podatki dostopna na naslovu http://localhost/scripta.js in jo naložiš iz greasemonkey scripte. Jaz nalagam cele scripte kar z:
Scripte, dokumentacijo in primere za greasemonkey najdeš na http://www.greasespot.net/
2. createElement/insertbefore/itd so del DOM API-ja. Več najdeš na https://developer.mozilla.org/en/Gecko_...
3. Pozabi piratebay. Večina nas za pisanje javascripta uporablja brezplačne editorje (notepad++, jedit, ...) za debugiranje pa firebug: http://getfirebug.com/
var script = document.createElement('script'); script.src = 'http://localhost/scripta.js'; script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script);
Scripte, dokumentacijo in primere za greasemonkey najdeš na http://www.greasespot.net/
2. createElement/insertbefore/itd so del DOM API-ja. Več najdeš na https://developer.mozilla.org/en/Gecko_...
3. Pozabi piratebay. Večina nas za pisanje javascripta uporablja brezplačne editorje (notepad++, jedit, ...) za debugiranje pa firebug: http://getfirebug.com/
Vredno ogleda ...
Tema | Ogledi | Zadnje sporočilo | |
---|---|---|---|
Tema | Ogledi | Zadnje sporočilo | |
» | jquery in div-i (strani: 1 2 )Oddelek: Izdelava spletišč | 11344 (10082) | lisjak |
» | JavaScript offsetTop in brskalnikiOddelek: Izdelava spletišč | 1001 (933) | shorvat |
» | Mreža - en PC se ne poveže prek routerjaOddelek: Omrežja in internet | 1167 (1167) | blackclaw |
» | Kako se tole naredi?Oddelek: Izdelava spletišč | 1508 (1208) | njok |
» | vkljucevanje TXT datoteke v htmlOddelek: Programiranje | 849 (799) | darh |