Loading ...
Довольно часто при разработке программ для Веб используется компонент WebBrowser, расположенный на странице палитры компонентов Internet. Этот компонент помогает легко встроить веб-браузер в Ваше приложение и использовать все функциональные возможности IE в своих приложениях.
При этом может возникнуть необходимость обратить внимание пользователя на какой-либо элемент, загруженной в WebBrowser страницы, например на ссылку или изображение. Выводить все ссылки в отдельный список? Не эффективно и может потребовать лишнего места на форме для расположения визуальных компонентов. Более эффективно каким-либо образом изменить html-код страницы, например выделить ссылки полужирным шрифтом или вставить рядом со ссылкой небольшое изображение. Как это делается - рассмотрим на небольшом примере.
1. Теория
В статье "Что можно "вытащить" из DOMа" мы немного касались таких свойств объекта Document как innerText и outerText. Аналогично этим, есть ещё два свойства: innerHTML и outerHTML. Чтобы понять какую информацию несут в себе эти свойства посмотрите на следующий рисунок:
В представленном на рисунке фрагменте кода рассмотрены свойства innerHTML/innerText и outerHTML/outerText для элемента страницы "параграф".
Теперь, используя эти свойства Вы сможете всегда найти на странице необходимый элемент и работать с ним.
Что касается вставки своего кода в загруженную страницу, то для этого можно использовать два метода:
- insertAdjacentText(where, text: string);
- insertAdjacentHTML(where, html: string).
Эти методы очень похожи друг на друга. Единственное различие в них состоит в том, что insertAdjacentHTML позволяет вставить в страницу текст, содержащий html-теги и эти теги будут правильно интерпретированы браузером.
Для того, чтобы воспользоваться этими методами необходимо задать два параметра: where - строка, указывающая в каком месе следует вставить элемент text/html. При этом where может принимать следующие значения:
afterBegin - вставляет строку text/html после открывающего тега элемента;
beforeBegin - вставляет строку text/html перед открывающим тегом элемента;
afterEnd - вставляет строку text/html после закрывающего тега элемента;
beforeEnd - вставляет строку text/html перед закрывающим тегом элемента;
Теперь рассмотрим все вышесказанное на небольшом примере.
2. Практическая часть
Давайте напишем небольшое приложение, которое будет каким-либо образом отмечать на загруженной странице все ссылки.
Открываем Delphi, создаем новый проект и в главном модуле не забываем подключить в uses модуль MSHTML.
Я не стал сильно "выделываться" в плане интерфейса и сделал вот такую форму приложения:
В верхнее поле вводим адрес сайта, жмем "Перейти" и после загрузки страницы начинаем "колдовать" над кодом страницы.
При этом с помощью двух ComboBox'ов я регулирую что и куда вставлять. Первый ComboBox указывает, каким методом пользоваться, а второй - куда вставлять новый элемент/текст.
Теперь обратимся непосредственно к листингам программы. Во-первых, напомню тем кто забыл и сообщу тем кто ещё не знает, что переход на URL в WebBrowser'е осуществляется вызовом метода Navigate:
WebBrowser1.Navigate(Edit1.Text);
После того, как страница будет загружена, достаточно выполнить следующую процедуру:
procedure TForm1.Button2Click(Sender: TObject);
var DocA: IHTMLElementCollection;
Element: IHTMLElement;
i:integer;
begin
DocA:=(WebBrowser1.Document as IHTMLDocument2).links;
case ComboBox1.ItemIndex of
0:begin //Текст
for i:=0 to DocA.length - 1 do
begin
Element:=DocA.item(i,0)as IHTMLElement;
Element.insertAdjacentText(ComboBox2.Text, Edit2.Text);
end;
end;
1:begin //HTML
for i:=0 to DocA.length - 1 do
begin
Element:=DocA.item(i,0)as IHTMLElement;
Element.insertAdjacentHTML(ComboBox2.Text, Edit2.Text);
end;
end;
end;
end;
Здесь, как вы можете заметить, я снова обратился к DOM, а именно - получил коллекцию всех ссылок на странице и поработал с каждой ссылкой в отдельности через переменную Element, вставив рядом с ней необходимый текст. Работающая программа выглядит вот так:
Аналогичным образом можно вставлять в код страницы, например, небольшие изображения или вообще полностью изменить все рисунки на страницы - никто Вас не ограничивает :)
Если есть вопросы - прошу задавать.
Мой блог находят по следующим фразам
- excel delphi цвет границы ячейки
- сделать содержание в Shape word delphi
- delphi xml treeview
- delphi IdHTTP1.Post
- TTimer Delphi
- delphi 7 работа с xml документом
Подписаться на RSS
Подписаться на рассылку по e-mail
Подписаться на RSS-трубу Delphi и получать новости сразу пяти блогов по программированию на Delphi| Делись! | Загружай! | Плюсуй! |
| | |
15 Дек 2009 в 4:00 пп
спасибо интересненькая довольно таки статья, но вопрос как загрузить только определенную элементы? Тоесть при загрузке удалить лишние элементы?
15 Дек 2009 в 4:41 пп
Видимо следует анализировать HTTP-траффик :) Никогда не задавался такой целью как загрузка части содержимого страницы, но начал бы с HTTP-заголовков
10 Мар 2010 в 4:47 пп
ВЛАД, отличный материал… столкнулся с проблемой…
я делаю полуавтоматический постинг на форуме…
хочу вытащить поле <input и туда вставить заготовленую тему ..и вытащить …тело сообщение и туда вставить мое сообщение…
чтобы мне нужно было только на сайте нажать кнопку отправить…а поля авотматически заполнялись..
Как мне вытащить поля для ввода и добавить туда мой текст?
10 Мар 2010 в 5:32 пп
Если делается программа под конкретный форум, то по-моему удобнее было бы организовать работу через GET- POST-запросы, чем ковыряться в HTML-коде. А вообще вставить текст в поле ввода можно как рассказано здесь. Это пост из старого моего блога. Текст немного покорежен, но разобраться можно :)
02 мая 2010 в 8:53 дп
у меня есть более эффективный способ и лёгкий изменить исходный текст))))
memo1.keyup(чтото там);
begin
webbrowser1.oleobject.document.body.innerhtml := memo1.text;
end;
можно также наоборот брать сорс в мемо
у меня есть проблема с webbrowser!!!!
предложите способ отправки файла скрипту на сервере
через put или пост, плиииииииз очень нада
именно с использованием webbrowser! через indy я и так знаю….
10 Сен 2010 в 9:05 пп
Доброе время суток. Вопрос Автору. Можно ли привести пример со скачиваемым исходником программы, следующего функционала: 1)загружает страницу 2)находит нужную мне форму 3) Заполняет нужным мне текстом нужную форму. БУДУ ПРИМНОГО БЛАГОДАРЕН ЕСЛИ ПОМОЖЕТЕ В РЕШЕНИИ ДАННОЙ ЗАДАЧИ.
10 Сен 2010 в 9:37 пп
Давно все написано.
29 Сен 2010 в 12:16 пп
Вопрос возможно не по теме.
Я пытаюсь написать GPS трекер.
Использую Delphi+google map api.
Использую компонент webbrowser.
Нарисовать карту с гугла проблем нет, нарисовать на ней линией маршрут тоже не проблема. Проблема заключается в рисовании маршрута в режиме реального времени.
На гугле есть готовые скрипты java, но вот как заставить их работать на уже открытой html странице пока не пойму. Сейчас я просто изменяю текст html страницы и заново даю комманду WebBrowser1.Navigate(Text); что естественно занимает время, а также создает неудобства при работе с программой.
Можете подсказать путь более правильной работы с этой связкой.
Заранее благодарю.
Акмал.
18 Окт 2010 в 7:03 пп
У меня к вам такой вопрос. при загрузки страницы мне надо изменить ее код, то есть не просто вставить что то дополнительное, а в какой то части кода изменить. как это сделать?
18 Окт 2010 в 9:29 пп
Andrey, в принципе можно сделать так: качаете исходник страницы, например с помощью Synapse, изменяете его как вам надо и загружаете в TWebBrowser. Информации о том как закинуть в TWebBrowser страничку из string — в сети вагон. Кстати, THTTPSend из Synapse может фильтровать скачиваемые данные «на лету» — достаточно определить обработчик события у сокета
03 Окт 2011 в 7:53 пп
Доброго времени!
Вопрос не совсем по теме, но может быть поможете.
Как преобразовать параметр POST события OnBeforeNavigate в читабельный вид?
03 Окт 2011 в 8:35 пп
Михаил, UTF8ToString, UTF8ToAnsi, TEncoding.Convert() — выбирайте любой вариант