Hogyan lehet létrehozni egy szöveges keresési könyvjelzőt a JavaScript használatával

könyvjelző vannak JavaScript alkalmazások amelyhez hozzáférhető böngésző könyvjelzői. Ezeket használják a felhasználók számára különböző műveleteket hajtson végre weboldalakon. Például ez a FontShop könyvjelzője a FontShop webes betűkészleteinek bármely weblapon történő előnézete.

Ebben a cikkben látni fogjuk, milyen gyors és egyszerű készítsen egy könyvjelzőt egy ilyen létrehozásával Wikiwand-et hajt végre (jobb megjelenésű Wikipédia) keresés a kiválasztott szöveg bármely weboldalon.

Hogyan működik a könyvjelző

A könyvjelző URI-je használja a javascript: protokoll ami azt jelzi, hogy JavaScript kódból áll. Ha rákattint egy könyvjelzőre, megteheti futtassa a JavaScript-et weblapon, és olyan feladatokat hajt végre, mint például az oldal megjelenésének megváltoztatása, egy másik oldalra való átirányítás, vagy új információk megjelenítése rajta.

Mivel a könyvjelzők lényegében JavaScript kód készlet, könnyen készíthető kis JavaScript-ismeretekkel, akár személyes használatra, akár a felhasználóknak való felajánlásra, mint például a WordPress a Sajtóval Ez a könyvjelző.

Kezdje el a JavaScript-kódot

A URL-struktúra A Wikiwand egy angol nyelvű cikket használ https://www.wikiwand.com/en/articleTitle. Írnunk kell egy olyan forgatókönyvet, amely az URL-cím Wikiwand oldalára ugrik véget ér a legutóbb kiválasztott felhasználó karakterláncával - a kijelölt szövegnek szüksége lesz helyénvaló articleTitle.

Először mi kapja meg a szöveget a felhasználó a következő kóddal választotta ki az oldalt:

 getSelection (). toString () 

Meg kell öntvény a visszaadott objektum getSelection () karakterláncként a toString () módszert, annak érdekében adja meg a kiválasztott szöveget.

Ezután meg kell látogasson el a Wikiwand cikkoldalához. Ezt a következő logikával fogjuk elérni, ahol NEWURL lesz a A Wikiwand cikkoldal URL-címe (amely a kiválasztott sztringet tartalmazza a végén):

 location.href = newURL 

Amikor ezeket a két kódrészletet együtt helyezzük el, a következő szkripttel érünk el:

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

Most csak hozzá kell adnunk javascript: protokoll, és van a végleges kód fogjuk használni a könyvjelzőnkben:

 // hozzáadni egy sorban sortörések nélkül javascript: location.href = 'https://www.wikiwand.com/hu/' + getSelection () .SString (). ) 

Az opcionális cserélje (/ \ n / g, '% 20') a végén minden új vonal karaktert helyettesít (\ n) a szövegben egy szóközzel (20%).

A JavaScript kód készen áll. Ne feledje, hogy a kódot el kell helyezni egyetlen sorban, vonalak törése nélkül, mivel később lesz szövegbeviteli mezőbe.

Hozzon létre egy könyvjelzőt

Nyissa meg a böngésző könyvjelző ablakát, és új könyvjelző hozzáadása:

• Firefox: Nyomja meg a ctrl + shift + B / cmd + shift + B billentyűt, kattintson a jobb gombbal a "Könyvjelzői eszköztár" gombra, és válassza az "Új könyvjelző" lehetőséget..
• Króm: Nyomja meg a ctrl + shift + O / cmd + alt + B billentyűt, kattintson a jobb gombbal a "Könyvjelzősáv" elemre, majd válassza a "Oldal hozzáadása ...".

Az URL mezőben másolja be a JavaScript-kódot ezelőttről. Miután létrehozta a könyvjelzőt, használatra kész; menjen bármely weboldalra, válasszon ki egy szót a Wikiwandban keresni kíván, és kattintson a könyvjelzőre - a Wikiwand cikkoldal azonnal megnyílik.

Gyors hozzáférés

A könyvjelzők minden alkalommal, amikor szüksége van a könyvjelzőkre, a választás helyett választhat közvetlenül megjeleníteni a böngészőben gyors eléréshez.

• Firefox: Kattintson a "Nézet> Eszköztárak" elemre a felső menüsorban, és válassza a "Könyvjelzői eszköztár" lehetőséget..
• Króm: Nyomja meg a ctrl + shift + B / cmd + shift + B gombot.

Hozzon létre egy könyvjelzőt

A könyvjelzőt hozzáadhatja egy weboldalhoz hiperhivatkozásként valamint a látogatók könyvjelző vagy egyszerűen húzza a linket a könyvjelző eszköztárába, vagy kattintson a jobb gombbal a hivatkozásra, és válassza ki a könyvjelző könyvjelzőjének lehetőségét.

Könyvjelzőjének hiperhivatkozássá alakításához hozzon létre egy HTML címke a könyvjelző parancsfájljával értékét href tulajdonság:

   Wikiwand Keresés Bookmarklet  

A könyvjelzők külön tárolása

Te is használjon külön JavaScript fájlt a könyvjelzők kódjának tárolásához, ami valószínűleg nem szükséges, ha olyan rövid szkriptje van, mint amilyet a bemutatón most láttunk, de praktikus lehet, ha a JavaScript kód túl hosszú ahhoz, hogy átmásolja a könyvjelzősávba böngészője.

A fájl myscript.js akarat adja meg a fő JavaScript-kódot a könyvjelzőhöz, és hozzá kell adnia a következő kódot mint könyvjelző URL-je (vagy a böngésző könyvjelzősávjához, vagy a href attribútum a HTML-fájlban):

 // hozzáadni egy sorban sortörések nélkül javascript: (() => a (dokumentum) let s = createElement ('script'); s.src = 'myscript.js'; fej.appendChild (ek) ) (); 

A fenti kódrészlet egy önálló hívó nyíl funkcióba csomagolva, és az ECMAScript 6 jellemzőit, például a enged kulcsszó, a kódhossz csökkentése érdekében. Hozzáad egy > címke a myscript.js fájl a a dokumentum részét ha a felhasználó rákattint a könyvjelzőre (Ne feledje, hogy lehet, hogy abszolút útvonalat kell használnia a myscript.js fájl).