Sekretna moc zakładek
Bookmarklety to specjalne łącza, które użytkownicy mogą dodawać do ulubionych w przeglądarce.
Te specjalne linki zawierają kod (tj. Nie tylko docelowy adres URL) i uruchamiają różne rodzaje przydatnych funkcji, pozwalając modyfikować i rozszerzać dowolną stronę internetową.
Gdy zaczniesz używać i budować własne, przestaniesz widzieć strony internetowe jako statyczne elementy, nad którymi nie masz kontroli.
Z bookmarkletami masz prawo zginać dowolną stronę internetową do swoich potrzeb.
Jak działają bookmarklety
Bookmarklety to więcej niż statyczne adresy URL. Są to krótkie fragmenty JavaScriptu, ładowane przez link, które działają na aktualnie otwartej stronie. W ten sposób kod staje się rozszerzeniem bieżącej strony i może wchodzić w interakcje z dowolnym elementem na nim.
Zmiany na stronie są tymczasowe i nie są zachowywane. Gdy użytkownik odświeży stronę lub podąży za linkiem, JavaScript zostanie utracony.
Po powrocie na stronę użytkownik musi ponownie kliknąć skrót, aby włączyć skryptozakładkę.
Przykładowa bookmarklet
Być może najlepszym sposobem na wyjaśnienie skryptozakładek jest pokazanie jednego w akcji. Bit.ly to potężna usługa skracania adresów URL, która zapewnia wygodę funkcja bookmarklet . Po prostu przeciągnij link do paska narzędzi i zacznij używać swojego nowego, fantazyjnego nowego linku na dowolnej stronie internetowej.
Po kliknięciu skryptu skryptowego Bit.ly panel ładuje się na bieżącej stronie. Zauważ, że to nie jest nowe okno przeglądarki, ale kod, który został dołączony do bieżącej strony. Takie bookmarklety umożliwiają programistom udostępnianie funkcji ze swojej witryny internetowej na dowolnej stronie w Internecie.
5 poręcznych zakładek, które pomogą Ci zacząć
Bit.ly
Niewiele rzeczy jest tak wygodnych jak narzędzie, które pozwala szybko skracać i udostępniać adresy URL. Dzięki Bit.ly bookmarklet Zamiast kopiować pełną ścieżkę URL i udostępniać ją, możesz kliknąć łącze, aby wygenerować jego krótką wersję. Zyskujesz również możliwość śledzenia, jak często ten link jest używany. Nie tylko to, ale krótkość łącza zapewnia, że link nie zostanie przerwany w wiadomości e-mail, jak to często robią dłuższe skomplikowane adresy URL.
Krótkofalówka
Deweloperzy często wychodzą na całość i pakują mnóstwo funkcji w jedną skryptozakładkę. Tak jest w przypadku Krótkofalówka Shaun Inman. Ten potężny skrót zawiera mnóstwo funkcji wyszukiwania w jednym miejscu. Możesz wyszukiwać Google, Amazon, Netflix i wiele innych ważnych źródeł. Jedynym problemem jest to, że musisz zapamiętać polecenia, aby z nim pracować. Odsuń się na bok, kiedy już się przyzwyczaisz, szybko staniesz się na nim bardzo zależny.
ReCSS
ReCSS to prosty skrypt, który odświeża CSS dla strony, ale nie całą samą stronę. Na pozór może to wydawać się dziwną rzeczą do zrobienia. Ale rozważ, czy budujesz aplikację lub proces, który jest zepsuty przez odświeżenie. Na przykład, jeśli stylizujesz komunikat o błędzie, zamiast powtarzać czynność, która generuje błąd, po prostu odśwież arkusz CSS, aby przetestować różne style. Kiedy nadejdzie czas, pokochasz ten.
autoPopulate
Gdybyś musiał zbudować wiele długich form, to z pewnością sympatyzujesz z ludźmi, którzy są sfrustrowani koniecznością wypełniania formularzy w kółko. To jest gdzie autoPopulate Ta funkcjonalność jest dość prosta: bookmarklet, który automagicznie wypełnia pola formularzy danymi cyklicznymi. W razie potrzeby można również utworzyć niestandardową wersję z własnymi wartościami.
Instapaper
Instapaper to cała usługa zbudowana wokół skryptozakładki. Poręczne narzędzie zapisuje strony, które chciałbyś przeczytać później. Dogodnie synchronizuje się z iPhonem, iPadem i Kindle, dzięki czemu możesz łatwo podnieść miejsce, w którym skończyłeś czytać.
Idealna struktura skryptozakładek
Istnieje sposób na tworzenie bookmarkletów, które zapewniają ich łatwą obsługę. Zasada jest prosta: użyj skryptozakładki jako powłoki, aby załadować pliki źródłowe na stronę. Oznacza to, że mięso kodu nie jest faktycznie zawarte w zakładce. Eliminuje to problem z aktualizowaniem zakładki po zmianie kodu.
Aby przygotować aktualizacje do swojej zakładki, po prostu skonstruuj link, aby załadował wszystkie zasoby z twojego serwera na stronę. Zazwyczaj oznacza to dodanie do strony pliku JavaScript i CSS, a następnie uruchomienie podstawowego kodu JavaScript, aby uruchomić tę funkcję.
Następujący JavaScript dołącza określony plik JavaScript do strony:
new_script=document.createElement('SCRIPT');new_script.type='text/javascript';new_script.src="'https://www.your-site.com/script.js?';document.getElementsByTagName('head')[0].appendChild(new_script);
Szablon do tworzenia skryptozakładek
Opierając się na tej prostej koncepcji, poniżej przedstawiono dwa podstawowe zarysy tworzenia własnej skryptozakładki. Podstawowym wyborem będzie wyłączenie buforowania dla pliku JavaScript.
Szablon 1: buforowanie
Szablon nie zapobiega buforowaniu. Oznacza to, że twój skrypt zostanie zapisany na komputerze użytkownika przez pewien okres czasu. W końcu zostanie ponownie załadowany, ale nie masz możliwości dowiedzieć się, jak szybko. Oto szablon:
javascript:(function(){new_script=document.createElement('SCRIPT');new_script.type='text/javascript';new_script.src='https://www.your-site.com/script.js?';document.getElementsByTagName('head')[0].appendChild(new_script);})();
Szablon 2: buforowanie wyłączone
Ta alternatywa zawiera przydatny parametr, który zapobiega buforowaniu skryptu. Jest to idealne rozwiązanie, ponieważ za każdym razem, gdy używasz linku, uruchomi on najnowszą wersję na serwerze.
javascript:(function(){new_script=document.createElement('SCRIPT');new_script.type='text/javascript';new_script.src='https://www.your-site.com/script.js?x=' +(Math.random());document.getElementsByTagName('head')[0].appendChild(new_script);})();
Pamięć podręczna jest wyłączona po prostu przez dodanie losowego ciągu zapytania na końcu znacznika skryptu. To powoduje, że przeglądarka ładuje skrypt za każdym razem, gdy jest używany.
Zwróć też uwagę, że te funkcje znajdują się w opakowaniu JavaScript, które identyfikuje je jako kod JavaScript.
Jak korzystać z szablonów
Korzystając z tych dwóch szablonów, oto, jak je ustawić. Najpierw zastąp URL w kodzie pełną ścieżką do pliku JavaScript na serwerze. Po drugie, umieść powyższy kod w tagu linku, który można dodać do strony. To jest ten link, który użytkownicy przeciągają i upuszczają w swoich zakładkach.
Coś takiego powinno wystarczyć:
http://ted.mielczarek.org/code/mozilla/bookmarklet.html" class=external rel=nofollow> generator zakładek .Po wprowadzeniu podstawowej struktury można rozpocząć dodawanie do skryptów pliku skryptozakładki dowolnej funkcji opartej na języku JavaScript. Użyj nowego linku w przeglądarce, aby przetestować na bieżąco!
Nie zapomnij o pamięci podręcznej!
Jednym z najbardziej frustrujących aspektów tworzenia zakładek jest buforowanie przeglądarki. Nie można wymusić odświeżenia pliku w inny sposób, niż bezpośrednio ładując źródłowy plik JavaScript, a następnie klikając "Odśwież". Przekazywanie parametru ciągu zapytania w powyższym szablonie jest znacznie łatwiejsze.
Ostrzeżenie o "Wyświetl źródło"
Kolejną kwestią, która wywołuje wiele frustracji, jest widok źródłowy strony internetowej. Po uruchomieniu skryptozakładki i naciśnięciu standardowej opcji "Wyświetl źródło" możesz być zaskoczony.
Gdy bookmarklet dynamicznie dodaje kod do strony, standardowy widok źródłowy nie pokazuje zaktualizowanego HTML. Zamiast tego musisz użyć wtyczki, takiej jak Firebug lub wyświetl wygenerowane źródło używając Twórca stron internetowych pasek narzędzi.
Dodatkowe zasoby do tworzenia skryptozakładek
- Powyższe szablony są oparte na samouczku BetterExplained .
- Marklets to niesamowity katalog bookmarkletów.
- Oto zarys budowy bookmarkslety oparte na jQuery .
Napisany wyłącznie dla WDD przez Patricka McNeila. Jest niezależnym pisarzem, programistą i projektantem. W szczególności uwielbia pisać o projektowaniu stron internetowych, szkolić ludzi w tworzeniu stron internetowych i budować strony internetowe. Pasje Patricka do trendów i wzorów internetowych można znaleźć w jego książkach TheWebDesignersIdeaBook.com . Śledź Patricka na Twitterze @designmeltdown .
Czy możesz wymyślić sposób na rozszerzenie swojej aplikacji za pomocą skryptozakładki? W jaki sposób twórczo użyłeś skryptozakładek?
