Cum de a crea un booklet de căutare text cu JavaScript

marcatorii sunteți Aplicații JavaScript care pot fi accesate ca marcajele browserului. Ele sunt folosite pentru a permite utilizatorilor să efectuați diferite acțiuni pe paginile web. De exemplu, acest bookmarklet de către FontShop este pentru vizualizarea fonturilor web FontShop pe orice pagină web.

În acest articol, vom vedea cât de rapid și ușor este creați un marcator prin crearea unui astfel efectuează un Wikiwand (Wikipedia mai bună) căutare pentru un text selectat pe orice pagină web.

Cum funcționează marcajele

URI-ul unui marcator de carte utilizează javascript: protocol care indică faptul că este compus din cod JavaScript. Când faceți clic pe un marcator, puteți rulați JavaScript pe o pagină Web și efectuați sarcini, cum ar fi schimbarea aspectului unei pagini, redirecționarea către o altă pagină sau afișarea de noi informații despre aceasta.

Deoarece marcajele sunt esențiale seturi de cod JavaScript, ele sunt ușor de creat cu puțină cunoștințe JavaScript, fie pentru utilizare personală, fie pentru a le oferi utilizatorilor dvs., cum ar fi WordPress, cu ajutorul aplicației sale Press This bookmarklet.

Începeți cu codul JavaScript

Structura URL Utilizarea Wikiwand pentru un articol în limba engleză este https://www.wikiwand.com/en/articleTitle. Trebuie să scriem un script care sărind pagina Wikiwand a URL-ului se termină cu șirul pe care tocmai la selectat utilizatorul - textul selectat va trebui să să fie pus în aplicare de titlul articolului.

Noi primii prindeți textul utilizatorul a selectat pe pagina cu următorul cod:

 getSelection (). toString () 

Avem nevoie să arunca obiectul returnat de getSelection () ca un șir folosind toString () pentru a face acest lucru ieșiți textul selectat.

În continuare, trebuie să facem asta efectuați o vizită la pagina de articol Wikiwand. Vom realiza acest lucru folosind următoarea logică, unde NEWURL va fi Adresa URL a paginii cu articolul Wikiwand (care va conține șirul selectat la sfârșit):

 location.href = newURL 

Când punem aceste două fragmente de cod împreună, ajungem la următorul script:

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

Acum trebuie doar să adăugăm javascript: protocol în față, și avem codul final vom folosi în bookmarklet:

 // adăuga într-o singură linie fără pauze de linii javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection () toString () înlocuire (/ \ n / g, '% 20' ) 

Opțional înlocuiți (/ \ n / g, '% 20') la sfarsit înlocuiește orice caracter de linie nouă (\ n) in text cu un singur caracter spațial (% 20).

Codul JavaScript este gata. Rețineți că este necesar să plasați codul într-o singură linie fără pauze de linie, deoarece mai târziu va fi adăugat la un câmp de introducere a textului.

Creați marcajul

Deschideți fereastra de marcaj a browserului dvs. și adăugați un nou marcaj:

• Firefox: Apăsați ctrl + shift + B / cmd + shift + B, faceți clic dreapta pe "Bookmarks Toolbar" și selectați "New Bookmark".
• Crom: Apăsați ctrl + shift + O / cmd + alt + B, faceți clic dreapta pe "Bară de marcaje" și selectați "Adăugați pagină ...".

În câmpul URL copy-paste codul JavaScript dinainte. Odată ce marcajul este creat, este gata de utilizare; accesați orice pagină Web, selectați un cuvânt pe care doriți să căutați în Wikiwand, și faceți clic pe marcatorul de carte - pagina de articol Wikiwand se va deschide imediat.

Acces rapid

În loc să ajungeți la meniul de marcaje de fiecare dată când aveți nevoie de marcatorul de carte, puteți alege să afișați-l direct în browserul dvs. pentru acces rapid.

• Firefox: Dați clic pe "Vizualizați> barele de instrumente" din bara de meniu de sus și selectați "Bara de instrumente pentru marcaje".
• Crom: Apăsați ctrl + shift + B / cmd + shift + B.

Creați un link de marcaj

Puteți să adăugați bookmarklet-ul dvs. pe un site Web ca hyperlink de asemenea, care vizitatori poate marca fie pur și simplu trageți-și-drop-link la bara de instrumente marcaj, sau faceți clic dreapta pe link-ul și selectând opțiunea de a marca acest lucru.

Pentru a transforma cartea dvs. de carte într-un hyperlink, creați un Eticheta HTML cu scriptul de marcaj ca valoare a lui href atribut:

   Wikiwand Căutați un marcaj  

Cum se stochează marcaje separat

Poti de asemenea utilizați un fișier JavaScript separat pentru a stoca codul de marcaj, care probabil nu este necesar dacă aveți un script scurt - ca cel pe care tocmai l-am văzut în acest tutorial - dar poate fi util când codul JavaScript este prea lung pentru a copia-l lipiți în bara de marcaje din browserul dvs..

Fișierul myscript.js voi găsește codul principal JavaScript pentru bookmarklet, și trebuie să adăugați următorul cod ca URL de marcaj (fie în bara de marcaje a browserului, fie ca valoare a lui href atribut în fișierul HTML):

 // adăugați într-o singură linie fără pauze de linii javascript: (() => cu (document) let s = createElement ('script'); ) (); 

Fragmentul de cod de mai sus este înfășurat într-o funcție de săgeată invocată de sine, și utilizează caracteristicile ECMAScript 6, cum ar fi lăsa cuvânt cheie, pentru a reduce lungimea codului. Se adaugă a > etichetă indicând spre myscript.js fișier către secțiune a documentului când utilizatorul face clic pe marcatorul de carte (rețineți că este posibil să fie necesar să utilizați o cale absolută pentru myscript.js fişier).