В данной статье мы рассмотрим, как можно работать с встроенными стилями элементов на веб-странице, используя интерфейс IHTMLDocument2 в контексте разработки на Delphi. Основное внимание будет уделено извлечению свойства backgroundImage из элементов, у которых стили заданы непосредственно в тегах (inline styles).
Проблема
При работе с интерфейсом IHTMLDocument2 через свойство styleSheets можно получить доступ к стилям, определенным в тегах <style> внутри документа <head>. Однако, если стиль задан внутри элемента <body>, например, как встроенное свойство тега <p>, например, <p style="background:url(image.jpg);">, то такой стиль не будет включен в коллекцию стилей, получаемую через styleSheets.
Подход к решению
Для того чтобы найти все элементы с встроенными стилями, содержащими backgroundImage, необходимо пройтись по всему дереву DOM и проанализировать стили каждого элемента. Это можно сделать, используя коллекцию all интерфейса IHTMLElementCollection, который доступен через свойство all интерфейса IHTMLDocument2.
Пример кода на Delphi
Вот пример функции на Delphi, которая итерирует все элементы страницы и извлекает значения свойства backgroundImage:
uses mshtml;
procedure WebBrowserCreateStringListImagesFromElementStyles(const AWebBrowser: TWebBrowser; ResultList: TStrings; NoUrl: Boolean = false);
var
nCount: Integer;
element: IHTMLElement;
elements: IHTMLElementCollection;
bgImage: String;
begin
Assert(Assigned(AWebBrowser.Document) and Assigned(ResultList));
if Assigned(AWebBrowser.Document) then
begin
elements := (AWebBrowser.Document as IHTMLDocument2).all;
for nCount := 0 To Pred(elements.Length) do
begin
element := elements.item(nCount, '') as IHTMLElement;
if (element.style.backgroundImage <> '') and (UpperCase(element.style.backgroundImage) <> 'NONE') then
begin
bgImage := element.style.backgroundImage;
if NoUrl then
begin
if Pos('URL(', UpperCase(bgImage)) = 1 then
begin
Delete(bgImage, 1, Length('URL('));
if Pos(')', bgImage) = Length(bgImage) then
Delete(bgImage, Length(bgImage), 1);
end;
end;
ResultList.Add(AnsiLowerCase(bgImage));
end;
end;
end;
end;
Комментарии
Обратите внимание, что для поиска элементов body можно использовать Document.body.all, но поскольку выражение для поиска не применимо в <head> и будет перемещено в <body> вне зависимости от этого, использование elements := ((AWebBrowser.Document as IHTMLDocument2).body.all as IHTMLElementCollection); фактически не изменит результаты поиска.
Этот код можно адаптировать для своих нужд, обрабатывая элементы и извлекая из них необходимую информацию о фоновых изображениях.
Статья о работе с встроенными стилями и свойством backgroundImage в интерфейсе IHTMLDocument2 на Delphi, с примером кода для извлечения фоновых изображений элементов с inline стилями.
Комментарии и вопросы
Получайте свежие новости и обновления по Object Pascal, Delphi и Lazarus прямо в свой смартфон. Подпишитесь на наш Telegram-канал delphi_kansoftware и будьте в курсе последних тенденций в разработке под Linux, Windows, Android и iOS
Telegram-канал