Kako ustvariti Bookmarklet za iskanje po besedilu z JavaScriptom

Zaznamki so Aplikacije JavaScript do katerih lahko dostopate kot zaznamke brskalnika. Uporabljajo se za omogočanje uporabnikov opravljajo različna dejanja na spletnih straneh. Na primer, ta knjižni znak za FontShop je za predogled FontShop spletnih pisav na kateri koli spletni strani.

V tem članku bomo videli, kako hitro in enostavno je sestavite zaznamek tako, da ustvarite tisto, ki opravlja Wikiwand (lepša Wikipedija) Iskanje za izbrano besedilo na kateri koli spletni strani.

Kako delujejo zaznamki

URI zaznamkov uporablja javascript: protokol ki kaže, da je sestavljena iz kode JavaScript. Ko kliknete na zaznamek, lahko zagnati JavaScript na spletni strani in izvajate naloge, kot je spreminjanje videza strani, preusmeritev na drugo stran ali prikaz novih informacij.

Ker so zaznamki v bistvu sklope kode JavaScript, enostavno jih je ustvariti z malo znanja JavaScripta, bodisi za osebno rabo ali za ponudbo svojim uporabnikom, kot je na primer WordPress s tiskalnikom..

Začnite uporabljati kodo JavaScript

The Struktura URL-ja Wikiwand uporablja za članek v angleškem jeziku https://www.wikiwand.com/en/articleTitle. Napisati moramo skript, ki skoči na stran Wikiwand, kateri URL se konča z nizom, ki ga je uporabnik pravkar izbral - izbrano besedilo bo potrebno namesto tega articleTitle.

Prvič, mi besedilo uporabnik je na strani izbral naslednjo kodo:

 getSelection (). toString () 

Moramo oddanih predmet, ki ga je vrnil getSelection () kot niz z uporabo toString () metodo, da jo dosežemo izbrano besedilo.

Nato moramo opravite obisk na stran članka Wikiwand. To bomo dosegli z naslednjo logiko, kjer newURL bo URL strani članka članka Wikiwand (ki bo vsebovala izbrani niz na koncu):

 location.href = newURL 

Ko skupaj sestavimo ta dva odseka kode, dobimo naslednji skript:

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

Sedaj moramo samo dodati javascript: protokol v ospredje, in imamo končna koda v zaznamku bomo uporabili:

 // dodajmo v eni vrstici brez prelomov vrstic javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection (). toString (). zamenjaj (/ / n / g, '% 20'). ) 

Neobvezno zamenjaj (/ / n / g, '% 20') na koncu nadomesti vse nove znake vrstic (n) v besedilu z enim presledkom (% 20).

JavaScript koda je pripravljena. Upoštevajte, da je treba kodo postaviti v eni vrstici brez prelomov vrstic, kasneje bo dodano v polje za vnos besedila.

Ustvarite zaznamek

Odprite okno zaznamkov brskalnika in dodajte nov zaznamek:

• Firefox: Pritisnite ctrl + shift + B / cmd + shift + B, z desno tipko miške kliknite »Orodna vrstica zaznamkov« in izberite »Nov zaznamek«.
• Chrome: Pritisnite ctrl + shift + O / cmd + alt + B, z desno tipko miške kliknite »vrstico z zaznamki« in izberite »Dodaj stran…«.

V polju URL copy-paste kodo JavaScript od prej. Ko je zaznamek ustvarjen, je pripravljen za uporabo; pojdite na katero koli spletno stran, izberite besedo želite poiskati v Wikipediji in kliknite zaznamek - Odpre se stran s članki Wikiwand.

Hitri dostop

Namesto, da vsakič, ko potrebujete zaznamek, dosežete meni za zaznamke, se lahko odločite za to prikaže neposredno v brskalniku za hiter dostop.

• Firefox: V zgornji menijski vrstici kliknite »Pogled> Orodne vrstice« in izberite »Orodna vrstica za zaznamke«..
• Chrome: Pritisnite ctrl + shift + B / cmd + shift + B.

Ustvarite povezavo z zaznamki

Zaznamki lahko dodate na spletno mesto kot hiperpovezavo tudi, katere obiskovalce lahko zaznamek lahko preprosto povlečete in spustite povezavo do orodne vrstice zaznamkov ali z desno tipko miške kliknete povezavo in izberete možnost za zaznamek.

Če želite spremeniti svoj zaznamek v hiperpovezavo, ustvarite Oznaka HTML s skripto za zaznamke kot njegova vrednost href atribut:

   Wikiwand iskanje Bookmarklet  

Kako shraniti zaznamke posebej

Lahko tudi uporabite ločeno datoteko JavaScript da shranite kodo za zaznamke, kar verjetno ni potrebno, če imate kratek skript - tako kot tisti, ki smo ga pravkar videli v tej vadnici - vendar je lahko uporaben, če je koda JavaScript predolga, da jo kopirate v vrstico z zaznamki. brskalnika.

Datoteka myscript.js volja hrani glavno kodo JavaScript za zaznamek in morate dodati naslednjo kodo kot zaznamek URL (v vrstici z zaznamki brskalnika ali kot vrednost href atribut v datoteki HTML):

 // dodamo v eni vrstici brez prelomov vrstic javascript: (() => s (document) naj s = createElement ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

Zgornji odrezek kode je zavita v funkcijo puščice, ki se samodejno pokliče, in uporablja funkcije ECMAScripta 6, kot je let ključno besedo, da se zmanjša dolžina kode. Dodaja a > oznako, ki kaže na myscript.js datoteko dokumenta ko uporabnik klikne na zaznamek (Upoštevajte, da boste morda morali uporabiti absolutno pot za myscript.js mapa).