Управлять содержимым html страницы можно при помощи букмарклета. В данной заметке опишу простые примеры букмарклета и его использование для заполнение веб форм.
Букмарклет - это JavaScript код, который сохранён в виде закладки или введёт в адресную строку в браузере и выполняется на открытой в данный момент странице. Подробнее https://ru.wikipedia.org/wiki/%D0%91%D1%83%D0%BA%D0%BC%D0%B0%D1%80%D0%BA%D0%BB%D0%B5%D1%82.
Для написания статьи использовался Crome, возможно в других браузерах есть свои особенности. Самым простым примером использования букмарклета является отображение сообщения в браузере. Для этого, например, можно открыть www.google.ru и после открытия страницы в строку адреса вместо www.google.ru ввести такой код
javascript:alert('Привет мир');
и нажать Enter, в окне браузера появится сообщение
Что бы не вводить код постоянно в строку адреса браузера и иметь его постоянно под рукой возможно добавить код этой функции в закладки.
Для это есть несколько вариантов, опишу два из них. Первый создать закладку вручную в меню создания закладок, второй написать html страницу со специально оформленной ссылкой, которую перетащить мышью на панель закладок.
Рассмотрим первый вариант. В Chrome зайдите в меню закладок.
Нажмите "Добавить страницу в закладки" появиться следующее окно
В нем нажмите кнопку "Изменить". И в появившемся окне введите название для закладки и код функции.
Особенностью ввода JavaScript кода является замена кавычек на их символьное описание ". Теперь откройте страницу в браузере.
Ссылка на букмарклет выделена синим, мышкой перетащите её на панель закладок, если панель закладок не отображается то это можно поправить - https://support.google.com/chrome/answer/95745?hl=ru
Теперь рассмотри некоторые примеры.
1.Изменение цвета фона. В фал html добавьте еще одну ссылку
2.Заполним данные в текстовом поле и поменяем его класс.
Для заполнения текстовых полей, нажатий на кнопку необходимо знать или их name или id. Что бы найти имя поля нужно на него нажать правой кнопкой мыши и выбрать "Посмотреть код". В правой части окна появиться окно с кодом и выделенным текстовым элементом.
В нашем случае находим атрибут id и запоминаем его, у нас это lst-ib. Теперь зная id текстового поля добавим на страницу html новую ссылку на буркмаркет:
Добавим новую закладку на панель задач. И перейдём на www.google.ru выполним букмарклет и в результате получим.
Для проверки изменения класса опять откроем код элемента, ранее класс был такой class="gsfi" теперь class="MyClass"
Так при помощи букмарклетов можно автоматизировать заполнение html форм и менять различные атрибуты элементов.
Ссылки по теме:
http://javascript.ru/unsorted/bookmarklet -
Букмарклеты и правила их написания
http://lifehacker.ru/2012/10/09/samye-poleznye-bukmarklety-dlya-vashego-brauzera/ -
Самые полезные букмарклеты для вашего браузера
https://support.mozilla.org/ru/kb/ispolzujte-bukmarklety-dlya-bystrogo-vypolneniya-z -
Используйте букмарклеты для быстрого выполнения задач
http://texterra.ru/blog/30-bukmarkletov-poleznykh-v-rabote-internet-marketologa.html -
30 букмарклетов, полезных в работе интернет-маркетолога
http://lifehacker.ru/2012/01/27/bookmarklet-2-chrome-plugin/ -
Как букмарклеты превратить в плагины для Google Chrome
Букмарклет - это JavaScript код, который сохранён в виде закладки или введёт в адресную строку в браузере и выполняется на открытой в данный момент странице. Подробнее https://ru.wikipedia.org/wiki/%D0%91%D1%83%D0%BA%D0%BC%D0%B0%D1%80%D0%BA%D0%BB%D0%B5%D1%82.
Для написания статьи использовался Crome, возможно в других браузерах есть свои особенности. Самым простым примером использования букмарклета является отображение сообщения в браузере. Для этого, например, можно открыть www.google.ru и после открытия страницы в строку адреса вместо www.google.ru ввести такой код
javascript:alert('Привет мир');
и нажать Enter, в окне браузера появится сообщение
Что бы не вводить код постоянно в строку адреса браузера и иметь его постоянно под рукой возможно добавить код этой функции в закладки.
Для это есть несколько вариантов, опишу два из них. Первый создать закладку вручную в меню создания закладок, второй написать html страницу со специально оформленной ссылкой, которую перетащить мышью на панель закладок.
Рассмотрим первый вариант. В Chrome зайдите в меню закладок.
Нажмите "Добавить страницу в закладки" появиться следующее окно
В нем нажмите кнопку "Изменить". И в появившемся окне введите название для закладки и код функции.
После этого нажимаете кнопку "Сохранить". Теперь эта закладка появляется в панели закладок. И для вызова этой функции можно на любой странице нажать на эту закладку.
Рассмотри второй вариант добавления закладки из html страницы. Для этого создадим пустой текстовый файл с названием AddBookmark.html. и вставим в него следующий код:
Рассмотри второй вариант добавления закладки из html страницы. Для этого создадим пустой текстовый файл с названием AddBookmark.html. и вставим в него следующий код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
AddBookmark
</title>
</head>
<body>
<a href="javascript: (function () { alert("Привет мир!"); })()" >Сообщение "Привет мир!"<a>
</body>
</html>Особенностью ввода JavaScript кода является замена кавычек на их символьное описание ". Теперь откройте страницу в браузере.
Ссылка на букмарклет выделена синим, мышкой перетащите её на панель закладок, если панель закладок не отображается то это можно поправить - https://support.google.com/chrome/answer/95745?hl=ru
Теперь рассмотри некоторые примеры.
1.Изменение цвета фона. В фал html добавьте еще одну ссылку
<a href="javascript:void(document.body.style.backgroundColor="gray");" >Серый фон<a>
2.Заполним данные в текстовом поле и поменяем его класс.
Для заполнения текстовых полей, нажатий на кнопку необходимо знать или их name или id. Что бы найти имя поля нужно на него нажать правой кнопкой мыши и выбрать "Посмотреть код". В правой части окна появиться окно с кодом и выделенным текстовым элементом.
В нашем случае находим атрибут id и запоминаем его, у нас это lst-ib. Теперь зная id текстового поля добавим на страницу html новую ссылку на буркмаркет:
<a href="javascript: (function () {
var searchInput;
searchInput = document.getElementById("lst-ib");
searchInput.className = "MyClass";
searchInput.value="Привет мир!";
})() ">Заполнение гугл поиска</a>
Добавим новую закладку на панель задач. И перейдём на www.google.ru выполним букмарклет и в результате получим.
Для проверки изменения класса опять откроем код элемента, ранее класс был такой class="gsfi" теперь class="MyClass"
Так при помощи букмарклетов можно автоматизировать заполнение html форм и менять различные атрибуты элементов.
Ссылки по теме:
http://javascript.ru/unsorted/bookmarklet -
Букмарклеты и правила их написания
http://lifehacker.ru/2012/10/09/samye-poleznye-bukmarklety-dlya-vashego-brauzera/ -
Самые полезные букмарклеты для вашего браузера
https://support.mozilla.org/ru/kb/ispolzujte-bukmarklety-dlya-bystrogo-vypolneniya-z -
Используйте букмарклеты для быстрого выполнения задач
http://texterra.ru/blog/30-bukmarkletov-poleznykh-v-rabote-internet-marketologa.html -
30 букмарклетов, полезных в работе интернет-маркетолога
http://lifehacker.ru/2012/01/27/bookmarklet-2-chrome-plugin/ -
Как букмарклеты превратить в плагины для Google Chrome
http://liwihelp.ru/internet-2/bookmarklets.html -
Как использовать Букмарклеты (Bookmarklets)
https://ru.wikipedia.org/wiki/%D0%91%D1%83%D0%BA%D0%BC%D0%B0%D1%80%D0%BA%D0%BB%D0%B5%D1%82 - Букмарклет
Как использовать Букмарклеты (Bookmarklets)
https://ru.wikipedia.org/wiki/%D0%91%D1%83%D0%BA%D0%BC%D0%B0%D1%80%D0%BA%D0%BB%D0%B5%D1%82 - Букмарклет
Комментариев нет:
Отправить комментарий