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