Slik lager du en tekst-søk bokmerke med JavaScript

bookmarklets er JavaScript-applikasjoner som kan nås som nettleser bokmerker. De brukes til å gjøre det mulig for brukerne å utfør forskjellige handlinger på nettsider. For eksempel er denne bokmerket ved FontShop for forhåndsvisning av FontShop webfonter på en hvilken som helst nettside.

I denne artikkelen skal vi se hvor raskt og enkelt det er å samle en bokmerke ved å skape en som utfører en Wikiwand (bedre Wikipedia) Søke for en valgt tekst på en hvilken som helst nettside.

Hvordan bookmarklets fungerer

URI av en bokmerke bruker javascript: protokollen som indikerer at det er sammensatt av JavaScript-kode. Når du klikker på et bokmerke, kan du Kjør JavaScript på en nettside, og utføre oppgaver, for eksempel å endre utseendet på en side, omdirigere til en annen side, eller vise ny informasjon om det.

Siden bokmerkene er i hovedsak sett med JavaScript-kode, de er enkle å lage med liten JavaScript-kunnskap, enten for personlig bruk eller for å tilby den til brukerne, slik som WordPress gjør med sin Press This bookmarklet.

Kom i gang med JavaScript-koden

De URL-struktur Wikiwand bruker for en engelskspråklig artikkel er https://www.wikiwand.com/en/articleTitle. Vi må skrive et skript som hopper til Wikiwand-siden av hvilken URL slutter med strengen brukeren nettopp har valgt - den valgte teksten må bli satt i stedet for articleTitle.

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

 getSelection (). toString () 

Vi må støpt objektet returneres av getSelection () som en streng ved å bruke toString () metode for å gjøre det skriv ut den valgte teksten.

Deretter må vi utføre et besøk til Wikiwand-artikelsiden. Vi oppnår dette ved å bruke følgende logikk, hvor NEWURL vil være URL til Wikiwand-artikkelsiden (som vil inneholde den valgte strengen på slutten):

 location.href = newURL 

Når vi setter disse to kodene sammen, slutter vi med følgende skript:

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

Nå må vi bare legge til javascript: protokoll til forsiden, og vi har siste kode vi bruker i vår bokmerkeliste:

 // legg til i en linje uten linjeskift javascript: location.href = 'https://www.wikiwand.com/no/' + getSelection (). toString (). erstatte (/ \ n / g, '% 20' ) 

Den valgfrie erstatte (/ \ n / g, '% 20') på slutten erstatter enhver ny linje karakter (\ n) i teksten med et mellomromstegn (% 20).

JavaScript-koden er klar. Merk at koden må plasseres i en enkelt linje uten linjeskift, siden senere blir det lagt til i et tekstfelt.

Opprett bokmerket

Åpne nettleserens bokmerkevindu, og legg til et nytt bokmerke:

• Firefox: Trykk ctrl + skift + B / cmd + skift + B, høyreklikk "Bookmarks Toolbar", og velg "New Bookmark".
• Chrome: Trykk ctrl + shift + O / cmd + alt + B, høyreklikk "Bookmarks bar", og velg "Add Page ...".

I URL-feltet kopier-lim inn JavaScript-koden fra før. Når bokmerket er opprettet, er det klart å bruke; gå til en hvilken som helst nettside, velg et ord du vil søke etter i Wikiwand, og klikk på bokmerket - Wikiwand-artikkelsiden åpnes samtidig.

Rask tilgang

I stedet for å nå frem til bokmerkemenyen hver gang du trenger bokmerket, kan du velge å vis den direkte i nettleseren din for rask tilgang.

• Firefox: Klikk på "Vis> Verktøylinjer" i toppmenylinjen, og velg "Bokmerk verktøylinje".
• Chrome: Trykk ctrl + skift + B / cmd + skift + B.

Opprett en bookmarklet-lenke

Du kan legge til bokmerke til et nettsted som en hyperkobling også, hvilke besøkende kan bokmerke ved å enten dra og slippe koblingen til bokmerke-verktøylinjen, eller høyreklikk koblingen og velg alternativet for å bokmerke det.

For å gjøre bokmerkelisten din til en hyperkobling, opprett en HTML-tag med bookmarklet-skriptet som verdien av sin href Egenskap:

   Wikiwand Søk Bookmarklet  

Hvordan lagre bookmarklets separat

Du kan også bruk en egen JavaScript-fil å lagre bookmarklet-koden, noe som sannsynligvis ikke er nødvendig hvis du har et kort skript - som det vi nettopp har sett i denne opplæringen - men kan være nyttig når JavaScript-koden er for lang til å kopiere den inn i bokmerkelinjen av nettleseren din.

Filen myscript.js vil hus den viktigste JavaScript-koden for bookmarklet, og du må legge til følgende kode som bokmerke URL (enten til nettleserens bokmerkefelt eller som verdien av href attributt i HTML-filen):

 // legg til i en linje uten linjeskift javascript: (() => med (dokument) la s = createElement ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

Kodestykket ovenfor er innpakket i en selvpåkende pilfunksjon, og bruker funksjoner i ECMAScript 6, for eksempel la søkeord, for å redusere kodelengden. Det legger til en > tag peker mot myscript.js fil til delen av dokumentet når brukeren klikker bokmerket (Merk at du må kanskje bruke en absolutt sti for myscript.js fil).