Sådan oprettes en tekst-søgning bogmærke med JavaScript

bookmarklets er JavaScript-applikationer der kan fås som browser bogmærker. De bruges til at gøre det muligt for brugerne at udføre forskellige handlinger på websider. For eksempel er denne bogmærke af FontShop til at forhåndsvise FontShop web skrifttyper på enhver webside.

I denne artikel skal vi se, hvor hurtigt og nemt det er at samle en bogmærke ved at skabe en sådan udfører en Wikiwand (bedre Wikipedia) Søg for en markeret tekst på enhver webside.

Hvordan bookmarklets arbejder

URI af en bogmærke bruger javascript: protokol det indikerer det er sammensat af JavaScript-kode. Når du klikker på en bogmærke, kan du køre JavaScript på en webside og udføre opgaver, som f.eks. ændring af udseendet på en side, omdirigering til en anden side eller visning af nye oplysninger om det.

Da bogmærker er i det væsentlige sæt JavaScript-kode, de er nemme at lave med lidt JavaScript-viden, enten til personlig brug eller til at tilbyde dem til dine brugere, som f.eks. WordPress gør det muligt at trykke på denne bogmærke.

Kom godt i gang med JavaScript-koden

Det URL struktur Wikiwand bruger til en engelskspråklig artikel er https://www.wikiwand.com/en/articleTitle. Vi skal skrive et script, der hopper til Wikiwand-siden af ​​hvilken URL slutter med den streng, som brugeren netop har valgt - den valgte tekst skal blive sat i stedet for articleTitle.

Først, vi få fat i teksten brugeren har valgt på siden med følgende kode:

 getSelection (). toString () 

Vi er nødt til støbt objektet returneres af getSelection () som en streng ved at bruge toString () metode, for at gøre det Udfør den valgte tekst.

Næste skal vi udføre et besøg til Wikiwand artikelsiden. Vi opnår dette ved at bruge følgende logik, hvor NEWURL vil være URL til Wikiwand artikelsiden (der vil indeholde den valgte streng i slutningen):

 location.href = newURL 

Når vi sætter disse to kodestykker sammen, slutter vi med følgende script:

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

Nu skal vi kun tilføje javascript: protokol til forsiden, og vi har endelig kode vi bruger i vores bogmærke:

 // tilføj i en linje uden linjeskift javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection (). toString (). erstatte (/ \ n / g, '% 20' ) 

Den valgfri erstatte (/ \ n / g, '% 20') i slutningen erstatter enhver ny linje karakter (\ n) i teksten med et enkelt rumtegn (% 20).

JavaScript-koden er klar. Bemærk, at koden skal placeres i en enkelt linje uden linjeskift, siden senere bliver det tilføjet til et tekstindtastningsfelt.

Opret bogmærket

Åbn din browser bogmærke vindue, og Tilføj et nyt bogmærke:

• Firefox: Tryk på ctrl + skift + B / cmd + skift + B, højreklik på "Bogmærkeværktøjslinje" og vælg "Ny bogmærke".
• Chrome: Tryk på ctrl + skift + O / cmd + alt + B, højreklik på "Bogmærkebjælke", og vælg "Tilføj side ...".

I URL-feltet Kopier-indsæt JavaScript-koden fra før. Når bogmærket er oprettet, er det klar til brug Gå til enhver webside, vælg et ord du vil søge efter i Wikiwand og klik på bogmærket - Wikiwand artikelsiden åbnes på én gang.

Hurtig adgang

I stedet for at nå frem til bogmærkesmenuen, hver gang du har brug for bookmarklet, kan du vælge at vis det direkte i din browser for hurtig adgang.

• Firefox: Klik på "Vis> Værktøjslinjer" i øverste menulinje, og vælg "Bogmærkeværktøjslinje".
• Chrome: Tryk på ctrl + skift + B / cmd + skift + B.

Opret en bookmarklet-link

Du kan tilføje din bogmærke til et websted som et hyperlink samt hvilke besøgende kan bogmærke ved enten at trække og slippe linket til bogmærkeværktøjslinjen eller højreklikke på linket og vælge muligheden for at bogmærke det.

Hvis du vil gøre din bogmærke til et hyperlink, skal du oprette en HTML tag med bookmarklet script som værdien af ​​dens href attribut:

   Wikiwand Søg Bookmarklet  

Sådan gemmer du bookmarklets separat

Du kan også brug en separat JavaScript-fil at gemme bookmarklet-koden, hvilket sandsynligvis ikke er nødvendigt, hvis du har et kort script - som det vi netop har set i denne vejledning - men det kan være nyttigt, når JavaScript-koden er for lang til at kopiere det til bogmærkebjælken af din browser.

Filen myscript.js vilje hus den vigtigste JavaScript kode til bogmærket, og du skal tilføje følgende kode som bogmærke URL (enten til browserens bogmærkelinje eller som værdien af href attribut i HTML-filen):

 // tilføj i en linje uden linjeskift javascript: (() => med (dokument) la s = createElement ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

Kodestykket ovenfor er indpakket i en selvpåkaldende pilfunktion, og bruger funktioner i ECMAScript 6, som f.eks lade søgeord, for at reducere kodelængden. Det tilføjer a > tag peger på myscript.js fil til afsnit af dokumentet når brugeren klikker på bogmærket (Bemærk at du måske skal bruge en absolut sti til myscript.js fil).