Så här skapar du en text-sökbokmärke med JavaScript

bookmark är JavaScript-applikationer som kan nås som webbläsare bokmärken. De används för att göra det möjligt för användarna att utföra olika åtgärder på webbsidor. Exempelvis är denna bokmärke av FontShop för att förhandsgranska FontShop webbfonter på vilken webbsida som helst.

I den här artikeln kommer vi att se hur snabbt och enkelt det är att konsolidera en bokmärke genom att skapa en sådan utför en Wikiwand (snyggare Wikipedia) Sök för en vald text på vilken webbsida som helst.

Hur bokmärken fungerar

URI för en bokmärke använder javascript: protokoll som indikerar att det är sammansatt av JavaScript-kod. När du klickar på en bokmärke kan du kör JavaScript på en webbsida och utföra uppgifter, till exempel ändra utseendet på en sida, omdirigera till en annan sida eller visa ny information om det.

Eftersom bokmärken är i huvudsak uppsättningar av JavaScript-kod, de är lätta att skapa med liten JavaScript-kunskap, antingen för personlig användning eller för att erbjuda dem till dina användare, som WordPress gör med dess Press This bookmarklet.

Kom igång med JavaScript-koden

De URL-struktur Wikiwand använder för en engelskspråkig artikel är https://www.wikiwand.com/en/articleTitle. Vi måste skriva ett skript som hoppar till Wikiwand-sidan av vilken URL slutar med strängen som användaren just har valt - den valda texten kommer att behöva sättas i stället för artikelrubrik.

Först Vi få tag i texten användaren har valt på sidan med följande kod:

 getSelection (). toString () 

Vi måste kasta objektet returneras av getSelection () som en sträng genom att använda att stränga() metod, för att göra det mata ut den valda texten.

Nästa måste vi utföra ett besök till Wikiwand artikel sidan. Vi uppnår detta genom att använda följande logik, var newURL kommer att vara URL på Wikiwand artikel sidan (som kommer att innehålla den valda strängen i slutet):

 location.href = newURL 

När vi sätter samman dessa två kodsedelar slutar vi med följande skript:

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

Nu behöver vi bara lägga till javascript: protokoll till framsidan, och vi har slutkod vi använder i vår bokmärke:

 // lägg till i en rad utan radbrytningar javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection (). toString (). ersätt (/ \ n / g, '% 20' ) 

Den frivilliga (\ / N / g, '% 20') ersätter i slutet ersätter någon ny rad tecken (\ n) i texten med ett enda mellanslag (% 20).

JavaScript-koden är klar. Observera att koden måste placeras i en enda linje utan rader, sedan senare blir det läggs till i ett textfält.

Skapa bokmärket

Öppna webbläsarens bokmärkesfönster och lägg till ett nytt bokmärke:

• Firefox: Tryck på ctrl + shift + B / cmd + shift + B, högerklicka på "Bookmarks Toolbar" och välj "New Bookmark".
• Krom: Tryck på ctrl + shift + O / cmd + alt + B, högerklicka på "Bokmärkesfältet" och välj "Lägg till sidan ...".

I URL-fältet kopiera-klistra in JavaScript-koden från tidigare. När bokmärket är skapat är det redo att använda; gå till vilken webbsida som helst, välj ett ord du vill söka i Wikiwand, och klicka på bokmärket - Wikiwand artikel sidan öppnas på en gång.

Snabb åtkomst

Istället för att nå bokmärkesmenyn varje gång du behöver bokmärket, kan du välja att visa det direkt i din webbläsare för snabb åtkomst.

• Firefox: Klicka på "Visa> Verktygsfält" i den övre menyraden och välj "Bokmärken Verktygsfält".
• Krom: Tryck på ctrl + skift + B / cmd + skift + B.

Skapa en bokmärkes länk

Du kan lägga till din bokmärke på en webbplats som en hyperlänk samt vilka besökare kan bokmärke genom att helt enkelt dra och släppa länken till bokmärkesverktygsfältet eller högerklicka på länken och välja alternativet för att bokmärke det.

För att göra din bokmärke till en hyperlänk, skapa en HTML-tagg med bokmärkesskriptet som värdet av dess href attribut:

   Wikiwand Sök Bookmarklet  

Så här lagrar du bokmärken separat

Du kan också använd en separat JavaScript-fil för att lagra bokmärkeskoden, vilket förmodligen inte är nödvändigt om du har ett kortfattat skript - som det vi just sett i den här handledningen - men kan komma till nytta när JavaScript-koden är för lång för att kopiera klistra in den i bokmärkesfältet av din webbläsare.

Filen myscript.js kommer Husa den viktigaste JavaScript-koden för bokmärket, och du måste lägga till följande kod som bokmärkesadressen (antingen till webbläsarens bokmärkesfält eller som värdet av href attribut i HTML-filen):

 // lägg till i en rad utan radbrytningar javascript: (() => med (dokument) let s = createElement ("script"); s.src = 'myscript.js'; head.appendChild (s) ) (); 

Kodstycket ovan är inslagna i en självpokerande pilfunktion, och använder funktioner i ECMAScript 6, till exempel låta sökord, för att minska kodlängden. Det lägger till en > tag som pekar mot myscript.js fil till delen av dokumentet när användaren klickar på bokmärket (Observera att du kan behöva använda en absolut väg för myscript.js fil).