Использование Drag and Drop для заполнения полей в TWebBrowser

Delphi , Интернет и Сети , Браузер

Автор: http://www.swissdelphicenter.ch

{
  This example shows how to fill out fields in your webbrowser by
  dragging the content of Label1 to a field of your webbrowser
}

procedure TForm1.FormCreate(Sender: TObject);
begin
  label1.DragMode := dmAutomatic;
end;

procedure TForm1.WebBrowserDragOver(Sender, Source: TObject; X,
  Y: Integer; State: TDragState; var Accept: Boolean);
var
  item: Variant;
begin
  //check if document is interactive
  if (Webbrowser.ReadyState and READYSTATE_INTERACTIVE) = 3 then
  begin
    item := WebBrowser.OleObject.Document.elementFromPoint(x, y);
    if Source is TLabel then
      Accept := True;
    Accept := (item.tagname = 'INPUT') and ((item.type = 'text') or
      (item.type = 'password')) or (item.tagname = 'TEXTAREA');
  end;
end;

procedure TForm1.WebBrowserDragDrop(Sender, Source: TObject; X,
  Y: Integer);
var
  item: Variant;
begin
  //check if document is interactive
  if (Webbrowser.ReadyState and READYSTATE_INTERACTIVE) = 3 then
  begin
    item := WebBrowser.OleObject.Document.elementFromPoint(x, y);
    item.Value := label1.Caption;
  end;
end;

Перевод на русский язык:

Это пример кода Delphi, демонстрирующий использование функциональности Drag and Drop в компоненте TWebBrowser для заполнения полей на веб-странице.

Расшифровка кода:

Процедура FormCreate В этой процедуре свойство DragMode контроля Label1 устанавливается в значение dmAutomatic, что позволяет пользователю перетаскивать содержимое лейбла в целевой объект.

Процедура WebBrowserDragOver Эта процедура вызывается, когда мышка перетаскивается над веб-браузером. Она проверяет, является ли документ интерактивным (т.е., имеет фокус и может принимать ввод) и является ли источником перетаскивания контролем Label1. Если оба условия истинны, она устанавливает переменную Accept в значение True, что указывает на то, что целевой объект является действительным.

Процедура также проверяет тип HTML-элемента по текущей позиции мыши (x, y). Она принимает только элементы <input> с типом "text" или "password", или элементы <textarea>.

Процедура WebBrowserDragDrop Эта процедура вызывается, когда перетаскивание операции завершается над веб-браузером. Она проверяет, является ли документ интерактивным и является ли источником перетаскивания контролем Label1. Если оба условия истинны, она устанавливает значение HTML-элемента по текущей позиции мыши (x, y) в caption контрола Label1.

В целом, этот код позволяет перетаскивать текст из лейбла на веб-страницу и заполнять поля, такие как поле ввода или текстовый блок. Код использует свойство DragMode для включения перетаскивания, а процедуры WebBrowserDragOver и WebBrowserDragDrop для обработки операций перетаскивания.

Альтернативное решение: Вместо использования метода OleObject.Document.ElementFromPoint для получения HTML-элемента по текущей позиции мыши, можно использовать более современный подход, SUCH AS ACCESSING THE WEBPAGE'S DOM USING JAVASCRIPT. Например, можно вставить скрипт на веб-страницу, который слушает события перетаскивания и обновляет значения полей соответственно.

Вот пример, как можно модифицировать код для использования JavaScript:

procedure TForm1.WebBrowserDragOver(Sender, Source: TObject; X, Y: Integer;
  State: TDragState; var Accept: Boolean);
begin
   // ...
end;

procedure TForm1.WebBrowserDragDrop(Sender, Source: TObject; X, Y: Integer);
var
  jsScript: string;
begin
  if (Webbrowser.ReadyState and READYSTATE_INTERACTIVE) = 3 then
  begin
    jsScript := 'document.addEventListener("dragover", function(event) {';
    jsScript := jsScript + '  var field = document.elementFromPoint(' + IntToJS(X) + ', ' + IntToJS(Y) + ');';
    jsScript := jsScript + '  if (field && field.tagName === "INPUT" && field.type === "text") {';
    jsScript := jsScript + '    field.value = "' + Label1.Caption + '";';
    jsScript := jsScript + '   }';
    jsScript := jsScript + '});';

    Webbrowser.ExecWB(WebBrowserWbExecuteJavaScript, OLECMDEXECUTE_SCRIPT, PChar(jsScript));
  end;
end;

В этом модифицированном коде мы вставляем скрипт JavaScript, который слушает события перетаскивания и обновляет значения полей соответственно. Функция IntToJS используется для конвертации целочисленных координат (X, Y) в строковый формат, совместимый с JavaScript.

Статья рассказывает о том, как использовать Drag and Drop для заполнения полей в TWebBrowser, используя пример кода на языке Delphi.

Комментарии и вопросы

Получайте свежие новости и обновления по Object Pascal, Delphi и Lazarus прямо в свой смартфон. Подпишитесь на наш Telegram-канал delphi_kansoftware и будьте в курсе последних тенденций в разработке под Linux, Windows, Android и iOS

:: Главная :: Браузер ::