Изменяем HTML-код в WebBrowser.

Довольно часто при разработке программ для Веб используется компонент WebBrowser, расположенный на странице палитры компонентов Internet. Этот компонент помогает легко встроить веб-браузер в Ваше приложение и использовать все функциональные возможности IE в своих приложениях.

При этом может возникнуть необходимость обратить внимание пользователя на какой-либо элемент, загруженной в WebBrowser страницы, например на ссылку или изображение. Выводить все ссылки в отдельный список? Не эффективно и может потребовать лишнего места на форме для расположения визуальных компонентов.  Более эффективно каким-либо образом изменить html-код страницы, например выделить ссылки полужирным шрифтом или вставить рядом со ссылкой небольшое изображение. Как это делается — рассмотрим на небольшом примере.

1. Теория

В статье «Что можно «вытащить» из DOMа» мы немного касались таких свойств объекта Document как innerText и outerText. Аналогично этим, есть ещё два свойства: innerHTML и outerHTML. Чтобы понять какую информацию несут в себе эти свойства посмотрите на следующий рисунок:

В представленном на рисунке фрагменте кода рассмотрены свойства innerHTML/innerText и outerHTML/outerText для элемента страницы «параграф».

Теперь, используя эти свойства Вы сможете всегда найти на странице необходимый элемент и работать с ним.

Что касается вставки своего кода в загруженную страницу, то для этого можно использовать два метода:

1. insertAdjacentText(where, text: string);
2. 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, вставив рядом с ней необходимый текст. Работающая программа выглядит вот так:

Аналогичным образом можно вставлять в код страницы, например, небольшие изображения или вообще полностью изменить все рисунки на страницы — никто Вас не ограничивает :)

Если есть вопросы — прошу задавать.