Как да създадете Bookmarklet за търсене на текст с JavaScript

Скриптови отметки сте JavaScript приложения които могат да бъдат достъпни както в браузъра. Те се използват, за да се даде възможност на потребителите извършват различни действия на уеб страници. Например, тази Bookmarklet от FontShop е за преглед на FontShop уеб шрифтове на всяка уеб страница.

В тази статия ще видим колко бързо и лесно е това измислям букмарклет чрез създаване на такава изпълнява Wikiwand (по-добре изглеждаща Уикипедия) Търсене за избран текст на която и да е уеб страница.

Как работят букмарклетите

URI на отметка използва JavaScript: протокол което показва, че е съставен от JavaScript код. Когато кликнете върху отметка, можете изпълнете JavaScript на уеб страница и изпълняват задачи, като например промяна на външния вид на дадена страница, пренасочване към друга страница или показване на нова информация за нея.

Тъй като отметките са по същество набори от JavaScript код, те са лесни за създаване с малко JavaScript познания, както за лична употреба, така и за предлагане на вашите потребители, като например WordPress с натискането на този букмарклет..

Започнете с JavaScript кода

Най- Структура на URL адрес Wikiwand използва за текст на английски език https://www.wikiwand.com/en/articleTitle. Трябва да напишем скрипт, който прескача на страницата на Wikiwand на кой URL адрес завършва с низ, който потребителят току-що е избрал - избраният текст ще трябва да бъде на мястото на articleTitle.

Първо, ние хванете текста потребителят е избрал на страницата със следния код:

 getSelection (). ToString () 

Ние трябва да хвърли обектът се връща от getSelection () като низ с помощта на ToString () метод, за да го направи извежда избрания текст.

След това трябва извърши посещение към страницата за статии на Wikiwand. Ще постигнем това, като използваме следната логика, където NEWURL ще бъде URL адрес на страницата със статии на Wikiwand (който ще съдържа избрания низ в края):

 location.href = newURL 

Когато сложим тези два кодови фрагмента заедно, ще получим следния скрипт:

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

Сега трябва само да добавим JavaScript: протоколът отпред, а ние имаме краен код ще използваме в нашия букмарклет:

 // добавяме в един ред без раздели на ред javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection (). toString (). замени (/ / n / g, '% 20'). ) 

Незадължително заместване на (/ \ п / г, '% 20') накрая замества всеки нов символ на линия (\ Н) в текста с един символ за интервал (20%).

Кодът на JavaScript е готов. Имайте предвид, че кодът трябва да бъде поставен в един ред без прекъсвания на редовете, от по-късно ще бъде добавено към поле за въвеждане на текст.

Създайте отметката

Отворете прозореца на отметките на браузъра си и добавете нов маркер:

• Firefox: Натиснете ctrl + shift + B / cmd + shift + B, щракнете с десния бутон на мишката върху "Bookmark Toolbar" и изберете "Нова отметка".
• Chrome: Натиснете ctrl + shift + O / cmd + alt + B, кликнете с десния бутон на мишката върху лентата на отметките и изберете "Добавяне на страница ...".

В полето URL копирайте и поставете JavaScript кода от преди. След като маркера е създаден, той е готов за използване; отидете на всяка уеб страница, изберете дума искате да търсите в Wikiwand и кликнете върху отметката - страницата за статии на Wikiwand ще се отвори веднага.

Бърз достъп

Вместо да достигате до менюто на отметките всеки път, когато ви е нужен букмарклет, можете да изберете покажете директно в браузъра си за бърз достъп.

• Firefox: Кликнете върху "Преглед> Ленти с инструменти" в горната лента на менюто и изберете "Лента с инструменти".
• Chrome: Натиснете ctrl + shift + B / cmd + shift + B.

Създайте връзка за отметка

Можете да добавите своята отметка към уебсайт като хипервръзка както и кои посетители може да маркирате или чрез просто плъзгане и пускане на връзката към лентата с отметки, или с щракване с десния бутон върху връзката и избор на опцията за маркиране.

За да превърнете вашата отметка в хипервръзка, създайте HTML етикет със скрипта за отметки като стойността му HREF атрибут:

   Упътване за търсене в Wikiwand  

Как да съхранявате отделни букмарклети

Можете също използвайте отделен JavaScript файл да съхраните кода на отметката, който вероятно не е необходим, ако имате кратък скрипт - като този, който току-що видяхме в този урок - но може да ви е удобно, когато JavaScript кодът е твърде дълъг, за да го копирате в лентата на отметките на вашия браузър.

Файлът myscript.js ще въведете основния код на JavaScript за букмарклета и трябва да добавите следния код като URL адрес на отметка (или в лентата на отметките на браузъра, или като стойността на HREF атрибут в HTML файла):

 // добавяне в един ред без прекъсвания на ред javascript: (() => с (document) нека s = createElement ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

По-горният кодов фрагмент е увити в самостоятелно извикваща стрелка, и използва функции на ECMAScript 6, като например позволявам ключова дума, за да се намали дължината на кода. Той добавя a > маркер, сочещ към myscript.js файл към на документа когато потребителят кликне върху букмарклета (имайте предвид, че може да се наложи да използвате абсолютен път за myscript.js файл).