1. 1. Теорія
2. 2. Практична частина

Досить часто при розробці програм для Веб використовується компонент 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, вставивши поруч з нею необхідний текст. Працююча програма виглядає ось так:

Аналогічним чином можна вставляти в код сторінки, наприклад, невеликі зображення або взагалі повністю змінити все малюнки на сторінки - ніхто Вас не обмежує :)

Якщо є питання - прошу задавати.