Delphi XE6のFireMonkeyモバイルアプリケーションでTWebBrowserのHTMLページにJavaScriptを実行する

Delphi XE6のFireMonkeyモバイルアプリケーションで、TWebBrowserで表示しているHTMLページに対して、JavaScriptを実行する方法を紹介します。

今回作成するアプリケーションは、ボタン(TButton)を押すと、ブラウザ(TWebBrowser)に表示している文字を入力欄(TEdit)に入力した文字に書き換えます。

フォームにTWebBrowserとTEdit、TButtonを配置します。

01

フォームを作成するときに、サンプルのHTMLを表示します。

フォームのOnCreateイベントに次のコードを記述します。

procedure TForm1.FormCreate(Sender: TObject);
const
  HTML = '<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"></head><body><span id="test">テスト</span></body></html>';
begin
  WebBrowser1.LoadFromStrings(HTML, '');
end;

TWebBrowserのLoadFromStringsは、引数のHTML文字列をTWebBrowserのコンテンツとして表示します。

ボタンのOnClickイベントに次のコードを記述します。

procedure TForm1.Button1Click(Sender: TObject);
var
  JavaScript: string;
begin
  JavaScript := Format('document.getElementById(''test'').innerHTML = %s;',
    [AnsiQuotedStr(Edit1.Text, '''')]);
  WebBrowser1.EvaluateJavaScript(JavaScript);
end;

TWebBrowserのEvaluateJavaScriptメソッドは、引数のJavaScriptを実行します。

上のコードでは、ボタンを押すとJavaScriptでHTMLを変更します。

アプリケーションを実行します。

02

入力欄に入力します。

03

ボタンを押すと、HTMLが更新されました。

04

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください