Како креирати Боокмарклет за претраживање текста са ЈаваСцриптом

Боокмарклетс су ЈаваСцрипт апликације којима се може приступити као обележивача прегледача. Користе се за омогућавање корисника обављају различите радње на веб страницама. На пример, овај боокмарклет од стране ФонтСхопа је за преглед ФонтСхоп веб фонтова на било којој веб страници.

У овом чланку ћемо видети како је то брзо и лако цонцоцт боокмарклет тако што ћете створити један изводи Викиванд (боље изгледа Википедиа) Претрага за одабрани текст на било којој веб страници.

Како функционишу боокмарклети

УРИ књижне ознаке користи јавасцрипт: протокол што указује да је састављен од ЈаваСцрипт кода. Када кликнете на боокмарклет, можете покрени ЈаваСцрипт на веб страници и обављање задатака, као што је промена изгледа странице, преусмеравање на другу страницу или приказивање нових информација на њој.

Пошто су маркери у суштини сетови ЈаваСцрипт кода, лако их је креирати са малим ЈаваСцрипт знањем, било за личну употребу или за понуду својим корисницима, као што је ВордПресс са својим Прессом..

Почните са ЈаваСцрипт кодом

Тхе Структура УРЛ-а Викиванд користи за чланак на енглеском језику хттпс://ввв.викиванд.цом/ен/артицлеТитле. Морамо написати скрипту која прелази на Викиванд страницу на којој УРЛ завршава се низом који је корисник управо изабрао - изабрани текст ће морати бити стављен на место артицлеТитле.

Прво смо ухватите текст корисник је на страници одабрао сљедећи код:

 гетСелецтион (). тоСтринг () 

Морамо да цаст објекат који је вратио гетСелецтион () као стринг помоћу тоСтринг () методом, како би га остварили излази изабрани текст.

Следеће, морамо обавите посету на страницу чланка Викиванд. То ћемо постићи користећи следећу логику, где невУРЛ ће бити УРЛ странице чланка Викиванд (који ће садржати изабрани стринг на крају):

 лоцатион.хреф = невУРЛ 

Када поставимо ова два исечка кода заједно, завршићемо са следећом скриптом:

 лоцатион.хреф = 'хттпс://ввв.викиванд.цом/ен/'+гетСелецтион () .тоСтринг () 

Сада само морамо додати јавасцрипт: Протокол напријед, и ми имамо финал цоде користићемо у нашем боокмарклет-у:

 // додајте у један ред без прелома редова јавасцрипт: лоцатион.хреф = 'хттпс://ввв.викиванд.цом/ен/' + гетСелецтион (). тоСтринг (). замените (/ \ т ) 

Опционално замени (/ / н / г, '% 20') на крају замењује било који нови знак линије (н) у тексту са једним размаком (% 20).

ЈаваСцрипт код је спреман. Имајте на уму да код треба да буде постављен у једној линији без прекида реда, од касније ће бити додато у поље за унос текста.

Креирајте маркер

Отворите прозор ознака прегледача и додајте нову ознаку:

• Фирефок: Притисните цтрл + схифт + Б / цмд + схифт + Б, кликните десним тастером миша на „Траку са алаткама обележивача“ и изаберите „Нова обележивач“.
• Хром: Притисните цтрл + схифт + О / цмд + алт + Б, кликните десним тастером миша на "траку обележивача" и изаберите "Додај страницу ...".

У пољу УРЛ цопи-пасте ЈаваСцрипт код од раније. Када је боокмарк креиран спреман је за употребу; идите на било коју веб страницу, изаберите реч које желите да претражите у Викиванд, и кликните на боокмарклет - Одмах ће се отворити страница чланка Викиванд.

Брзи приступ

Уместо да долазите до менија обележивача сваки пут када вам затреба боокмарклет, можете да изаберете приказати директно у вашем прегледнику за брзи приступ.

• Фирефок: Кликните на "Виев> Тоолбарс" у горњој траци менија и одаберите "Боокмаркс Тоолбар".
• Хром: Притисните цтрл + схифт + Б / цмд + схифт + Б.

Направите линк за боокмарклет

Можете додати своју ознаку на веб-сајт као хипервезу такође, које посетиоце може да обележи једноставно повлачењем и испуштањем везе на траку са обележивачима, или десним кликом на везу и одабиром опције да бисте је обележили.

Да бисте претворили свој боокмарклет у хипервезу, креирајте ХТМЛ ознака са боокмарклет скриптом као његова вредност хреф аттрибуте:

   Викиванд Сеарцх Боокмарклет  

Како засебно чувати боокмарклете

Можете такође користите засебну ЈаваСцрипт датотеку да сачувате код обележивача, што вероватно није неопходно ако имате кратки скрипт - као онај који смо управо видели у овом упутству - али може доћи при руци када је ЈаваСцрипт код предуг да бисте га копирали на траку обележивача вашег претраживача.

Фајл мисцрипт.јс ће поставите главни ЈаваСцрипт код за боокмарклет, и морате додати сљедећи код као УРЛ адресе обележивача (или у траци са обележивачима у прегледачу или као вредност хреф атрибут у ХТМЛ датотеци):

 // додајте у један ред без прекида редова јавасцрипт: (() => витх (доцумент) нека с = цреатеЕлемент ('сцрипт'); с.срц = 'мисцрипт.јс'; хеад.аппендЦхилд (с) ) (); 

Горњи исјечак кода је умотан у функцију стрелице која се само призива, и користи карактеристике ЕЦМАСцрипт 6, као што је дозволити како би се смањила дужина кода. Додаје: а > ознака која показује на мисцрипт.јс датотеку овог документа када корисник кликне на боокмарклет (имајте на уму да ћете можда морати да користите апсолутну путању за мисцрипт.јс филе).