Kaip sukurti teksto paieškos „Bookmarklet“ su „JavaScript“

Žymės yra „JavaScript“ programos kurią galima pasiekti kaip naršyklės žymes. Jie naudojami vartotojams atlikti skirtingus veiksmus tinklalapiuose. Pavyzdžiui, ši „FontShop“ knygelė skirta peržiūrėti „FontShop“ žiniatinklio šriftus bet kuriame tinklalapyje.

Šiame straipsnyje mes pamatysime, kaip greitai ir lengvai sutvarkykite žymę sukuriant tą atlieka „Wikiwand“ (geriau atrodanti „Wikipedia“) Paieška pasirinkto teksto bet kuriame tinklalapyje.

Kaip veikia „bookmarklets“

„Bookmarklet“ URI naudoja javascript: protokolą tai rodo sudarytas iš „JavaScript“ kodo. Kai spustelėsite žymeklį, galite paleiskite „JavaScript“ tinklalapyje ir atlikti užduotis, pvz., keisti puslapio išvaizdą, nukreipti į kitą puslapį arba rodyti naują informaciją.

Kadangi žymės yra iš esmės „JavaScript“ kodo rinkiniai, juos lengva kurti su mažomis „JavaScript“ žiniomis, tiek asmeniniam naudojimui, tiek siūlyti ją savo vartotojams, pvz., „WordPress“ su savo spauda.

Pradėkite naudoti „JavaScript“ kodą

The URL struktūra „Wikiwand“ naudoja anglų kalbos straipsnį https://www.wikiwand.com/en/articleTitle. Turime parašyti scenarijų, kuris pereina į Wikiwand puslapį, kurio URL baigiasi su eilute, kurią vartotojas ką tik pasirinko - pasirinktas tekstas turės būti būti įdiegta Pavadinimas.

Pirma, mes gauti teksto vartotojas puslapyje pasirinko šį kodą:

 getSelection () .String () 

Mums reikia mesti grąžintas objektas getSelection () kaip eilutė naudojant įString () metodą išrinkite pasirinktą tekstą.

Toliau turime apsilankykite į Wikiwand straipsnio puslapį. Tai pasieksime naudodami šią logiką, kur newURL bus Wikiwand straipsnio puslapio URL (kuriame bus pasirinkta eilutė pabaigoje):

 location.href = newURL 

Kai kartu sujungėme šiuos du kodo fragmentus, mes baigiame tokį scenarijų:

 location.href = 'https://www.wikiwand.com/en/'+getSelection () .toString () 

Dabar turime tik pridėti javascript: protokolas į priekį, ir mes turime galutinis kodas mes naudosime mūsų knygelėje:

 // pridėti vienoje eilutėje be eilutės pertraukų javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection () .SString (). pakeisti (/ n / g, '% 20' ) 

Neprivaloma pakeisti (/ n / g, „% 20“) pabaigoje pakeičia visus naujus linijos simbolius (n) tekste su vienu erdvės simboliu (% 20).

„JavaScript“ kodas yra parengtas. Atkreipkite dėmesį, kad kodą reikia įdėti vienoje eilutėje be linijos pertraukų, nuo tada jis bus pridedamas prie teksto įvedimo lauko.

Sukurkite žymę

Atidarykite naršyklės žymių langą ir pridėti naują žymę:

• „Firefox“: Paspauskite ctrl + shift + B / cmd + shift + B, dešiniuoju pelės mygtuku spustelėkite „Žymių įrankių juosta“ ir pasirinkite „Nauja žymė“.
• „Chrome“: Paspauskite ctrl + shift + O / cmd + alt + B, dešiniuoju pelės mygtuku spustelėkite „Žymių juosta“ ir pasirinkite „Pridėti puslapį…“.

URL lauke nukopijuokite „JavaScript“ kodą iš anksto. Sukūrus žymą, ji bus paruošta naudoti; eikite į bet kurį tinklalapį, pasirinkite žodį norite ieškoti Wikiwand, ir spustelėkite žymės žymę - Wikiwand straipsnio puslapis bus atidarytas iš karto.

Greita prieiga

Užuot pasiekę žymų meniu kiekvieną kartą, kai jums reikia žymės, galite pasirinkti rodyti jį tiesiogiai naršyklėje, kad galėtumėte greitai pasiekti.

• „Firefox“: Viršutiniame meniu juostoje spustelėkite „Peržiūrėti> Įrankių juostos“ ir pasirinkite „Žymių įrankių juosta“.
• „Chrome“: Paspauskite ctrl + shift + B / cmd + shift + B.

Sukurkite „bookmarklet“ nuorodą

Galite pridėti savo žymeklį į svetainę kaip hipersaitas taip pat lankytojai gali žymėti tiesiog perkelkite nuorodą į žymių įrankių juostą arba dešiniuoju pelės klavišu spustelėdami nuorodą ir pasirinkdami parinktį žymėti ją.

Norėdami paversti savo žymę į hipersaitą, sukurkite HTML žyma su „bookmarklet“ scenarijumi kaip jos vertė href atributas:

   „Wikiwand“ paieška „Bookmarklet“  

Kaip atskirai saugoti knygų lapelius

Tu taip pat gali naudoti atskirą „JavaScript“ failą išsaugoti „bookmarklet“ kodą, kuris tikriausiai nėra būtinas, jei turite trumpą scenarijų - kaip ir ką tik matėme šioje instrukcijoje -, bet gali būti patogu, kai „JavaScript“ kodas yra per ilgas, kad kopijuotumėte jį į žymių juostą naršyklės.

Failas myscript.js valia pagrindinį „JavaScript“ kodą užrašą, ir reikia pridėti šį kodą kaip žymės URL (arba naršyklės žymių juostoje, arba kaip href atributas HTML faile):

 // pridėti vieną eilutę be eilutės pertraukų javascript: (() => su (dokumentu) let s = createElement ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

Pirmiau pateiktas kodo fragmentas suvynioti į savarankišką rodyklę, ir naudoja ECMAScript 6 funkcijas, pvz., leisti raktinio žodžio, siekiant sumažinti kodo ilgį. Ji priduria a > žyma, nukreipta į myscript.js failą dokumento skyriuje kai naudotojas spusteli žymeklį (Atkreipkite dėmesį, kad jums gali reikėti naudoti absoliučią kelią myscript.js failas).