Javscript-function aufrufen, wenn function im HTML-header

**champagner**

Hallo,

ich erstelle eine firemonkey app mit einer einfachen google-maps Einbindung. Zusätzlich möchte ich, dass eine function "marker1" auf das Ereignis "Button2.Click" ausgeführt wird.

Die function findet sich im header.

Die Frage lautet: wie rufe ich eine function auf, die mit jacascript im html-header steht? In der VCL-Version hat es mit HTMLWIndow2 etc. funktioniert, aber nicht in der fmx (firmonkey)-Version.

zusammenfalten · markieren

Delphi-Quellcode:

			unit Unit2;

interface

uses

  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,

  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.StdCtrls,

  System.Sensors, System.Sensors.Components, FMX.WebBrowser, FMX.ListBox;

type

  TForm2 = class(TForm)

    LocationSensor1: TLocationSensor;

    WebBrowser1: TWebBrowser;

    Button1: TButton;

    procedure FormCreate(Sender: TObject);

    procedure Button1Click(Sender: TObject);

  private

    { Private-Deklarationen }

  public

    { Public-Deklarationen }

  end;

var

  Form2: TForm2;

implementation

{$R *.fmx}

uses Unit1;

const

{ Was used sample from }

{ https://developers.google.com/maps/documentation/javascript/examples/directions-panel }

cRoute =

'<!DOCTYPE html>'

+ '<html>'

+ '  <head>'

+ '    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">'

+ '    <meta charset="utf-8">'

+ '    <title>Displaying text directions with <code>setPanel()</code></title>'

+ '    <style>'

+ '      html, body, #map-canvas {'

+ '        height: 100%;'

+ '        margin: 0px;'

+ '        padding: 0px'

+ '      }'

+ '    </style>'

+ '    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>'

+ '    <script>'

+ ''

+ '   function initialize() {'

+ ''

+ '    var latlng  = new google.maps.LatLng(39.550189, 2.691211); '

+ '    var latlng2 = new google.maps.LatLng(39.551200, 2.691211); '

+ ''

+ '  var mapOptions = {'

+ '    zoom:   16,'

+ '    center: latlng, '

+ '    mapTypeId: google.maps.MapTypeId.ROADMAP, '       // ROADMAP (GROß geschrieben)

+ '  };'

+ '  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);'

+ '  var marker = new google.maps.Marker({'

+ '    position: latlng,'

+ '    title: "Hello World!"'

+ '  });'

+ '  marker.setMap(map);'

+ ''

+ '}'

+ ''

+ '  function marker1() {new google.maps.LatLng(39.551200, 2.691211)};'// Um diese function geht es                        <--------------

+ ''

+ 'google.maps.event.addDomListener(window, ''load'', initialize);'

+ ''

+ '    </script>'

+ '  </head>'

+ '  <body>'

+ '  <div id="map-canvas" style="width:100%; height:100%"> </div> '

+ '  </body>'

+ '</html>';

procedure TForm2.Button1Click(Sender: TObject);

begin

form2.close;

end;

procedure TForm2.FormCreate(Sender: TObject);

begin

WebBrowser1.LoadFromStrings(cRoute, '');

end;

procedure TButton2.Click (Sender: TObject);

begin

// Was kommt hierhin, um die function marker1 aufzurufen? Die function soll nur ausgeführt werden auf "Button2.Click".         <--------------

end;

end.

Herzlichen Dank. Ich arbeite mich auch gerne ein.

**mkinzler**

http://blogs.embarcadero.com/nikolay...nthedelphixe6/

**himitsu**

[DELPHI]...[/DELPHI] kennst du?

markieren

HTML-Code:

			...</head>

<body onload="marker1();">

  <div id=...

Aber gut, das wäre dann nicht in Click, sondern im FormCreate.

@mkinzler: Also dein Link passt ja wie die Faust auf's Auge.

Zitat:

markieren

Delphi-Quellcode:

			procedure TForm2.Button1Click(Sender: TObject);

begin

  form2.close;

end;

Los, haut ihm alle mal auf die Finger.

Lass du mal besser ganz schnell das Form2. verschwinden.

**champagner**

Zitat von mkinzler:

http://blogs.embarcadero.com/nikolay...nthedelphixe6/

Daran habe ich auch schon gedacht:

WebBrowser1.EvaluateJavaScript(cChicagoWinona); Aber ich habe ja keine const, sondern eine function?

**champagner**

Zitat von himitsu:

[DELPHI]...[/DELPHI] kennst du?

markieren

HTML-Code:

			...</head>

<body onload="marker1();">

  <div id=...

Aber gut, das wäre dann nicht in Click, sondern im FormCreate.

@mkinzler: Also dein Link passt ja wie die Faust auf's Auge.

Zitat:

markieren

Delphi-Quellcode:

			procedure TForm2.Button1Click(Sender: TObject);

begin

  form2.close;

end;

Los, haut ihm alle mal auf die Finger.

Lass du mal besser ganz schnell das Form2. verschwinden.

1. Im FormCreate wäre auch i.O., aber das kann ich ja keinen html-Text einbauen?
2. Was genau hat es mit dem form2 auf sich? Ist das nicht richtig?

**Sir Rufo**

Zitat von champagner:

Zitat von mkinzler:

http://blogs.embarcadero.com/nikolay...nthedelphixe6/

Daran habe ich auch schon gedacht:

markieren

Code:

WebBrowser1.EvaluateJavaScript(cChicagoWinona);

Aber ich habe ja keine const, sondern eine function?

Ja dann geht das wohl nicht

Bitte schau dir das Beispiel genau an (jag es durch den Compiler und schau mit dem Debugger zu, was da passiert) und dann sollte ein Licht angehen ...

**mkinzler**

Zitat:

@mkinzler: Also dein Link passt ja wie die Faust auf's Auge.

Deshalb habe ich ihn ja auch gepostet.

**champagner**

Zitat von Sir Rufo:

...und dann sollte ein Licht angehen ...

Tja, es bleibt leider sehr dunkel. Darf ich nochmals nachfragen, wo ich ansetzen kann? Herzlichen Dank.

**mkinzler**

Den Code der JS-Funktion musst Du in den String schreiben und dann EvaluateJavaScript() übergeben.
Genauso, wie es im Beispiel auch steht.

**champagner**

Zitat von mkinzler:

Den Code der JS-Funktion musst Du in den String schreiben und dann EvaluateJavaScript() übergeben.
Genauso, wie es im Beispiel auch steht.

Ist der Aufruf so i.O.? Die function "markerbc" selbst wird offenbar aber nicht ausgeführt (kein zweiter Marker in der Google Map).

zusammenfalten · markieren

Delphi-Quellcode:

			unit Unit2;

interface

uses

  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,

  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, FMX.StdCtrls,

  System.Sensors, System.Sensors.Components, FMX.WebBrowser, FMX.ListBox;

type

  TForm2 = class(TForm)

    LocationSensor1: TLocationSensor;

    WebBrowser1: TWebBrowser;

    Button1: TButton;

    procedure FormCreate(Sender: TObject);

    procedure Button1Click(Sender: TObject);

  private

    { Private-Deklarationen }

  public

    { Public-Deklarationen }

  end;

var

  Form2: TForm2;

implementation

{$R *.fmx}

uses Unit1;

const

{ Was used sample from }

{ https://developers.google.com/maps/documentation/javascript/examples/directions-panel }

cRoute =

'<!DOCTYPE html>'

+ '<html>'

+ '  <head>'

+ '    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">'

+ '    <meta charset="utf-8">'

+ '    <title>Displaying text directions with <code>setPanel()</code></title>'

+ '    <style>'

+ '      html, body, #map-canvas {'

+ '        height: 100%;'

+ '        margin: 0px;'

+ '        padding: 0px'

+ '      }'

+ '    </style>'

+ '    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>'

+ ''

+ '    <script>'

+ ''

+ '    function initialize() {'

+ '                             var latlng  = new google.maps.LatLng(39.550189, 2.691211); '

+ ''

+ '                             var mapOptions = {'

+ '                                                 zoom:   16,'

+ '                                                 center: latlng, '

+ '                                                 mapTypeId: google.maps.MapTypeId.ROADMAP, '       // ROADMAP (GROß geschrieben)

+ '                                              };'

+ '                             var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);'

+ '                             var marker = new google.maps.Marker({position: latlng,'

+ '                                                                  title: "Hello World!",'

+ '                                                                  animation: google.maps.Animation.BOUNCE,'

+ '                                                                 });'

+ '                             marker.setMap(map);'

+ '                           }'

+ ''

+ '    function markerbc()    {'                                               <----------------------------- hier die function "markerbc"; stimmt sie so?

+ '                             var latlng2 = new google.maps.LatLng(39.551200, 2.691211); '

+ '                             var marker1 = new google.maps.Marker({position: latlng2,'

+ '                                                                  title: "Hello aaa!",'

+ '                                                                 });'

+ '                             marker1.setMap(map);'

+ '                           }'

+ ''

+ '    google.maps.event.addDomListener(window, ''load'', initialize);'

+ ''

+ ''

+ '    </script>'

+ ''

+ '  </head>'

+ '  <body>'

+ '  <div id="map-canvas" style="width:100%; height:100%"> </div> '

+ '  </body>'

+ '</html>';

procedure TForm2.Button1Click(Sender: TObject);

begin

form2.close;

end;

procedure TForm2.FormCreate(Sender: TObject);

  const

        a = 'markerbc()';                                           <----------------------------- hier die const definiert

begin

WebBrowser1.LoadFromStrings(cRoute, '');

WebBrowser1.EvaluateJavaScript(a);                                  <----------------------------- hier die function "markerbc" aufgerufen

end.

Javscript-function aufrufen, wenn function im HTML-header

Javscript-function aufrufen, wenn function im HTML-header

AW: Javscript-function aufrufen, wenn function im HTML-header

AW: Javscript-function aufrufen, wenn function im HTML-header

AW: Javscript-function aufrufen, wenn function im HTML-header

AW: Javscript-function aufrufen, wenn function im HTML-header

AW: Javscript-function aufrufen, wenn function im HTML-header

AW: Javscript-function aufrufen, wenn function im HTML-header

AW: Javscript-function aufrufen, wenn function im HTML-header

AW: Javscript-function aufrufen, wenn function im HTML-header

AW: Javscript-function aufrufen, wenn function im HTML-header

Stichworte

Forumregeln

mkinzler (Moderator) Registriert seit: 9. Dez 2005 Ort: Heilbronn 39.851 Beiträge Delphi 11 Alexandria	#2 AW: Javscript-function aufrufen, wenn function im HTML-header 13. Jun 2014, 08:12 http://blogs.embarcadero.com/nikolay...nthedelphixe6/ Markus Kinzler
	Zitat

champagner Registriert seit: 29. Apr 2008 46 Beiträge Delphi XE6 Professional	#4 AW: Javscript-function aufrufen, wenn function im HTML-header 13. Jun 2014, 08:20 Zitat von mkinzler: http://blogs.embarcadero.com/nikolay...nthedelphixe6/ Daran habe ich auch schon gedacht: WebBrowser1.EvaluateJavaScript(cChicagoWinona); Aber ich habe ja keine const, sondern eine function? Geändert von champagner (14. Jun 2014 um 05:49 Uhr)
	Zitat

mkinzler (Moderator) Registriert seit: 9. Dez 2005 Ort: Heilbronn 39.851 Beiträge Delphi 11 Alexandria	#7 AW: Javscript-function aufrufen, wenn function im HTML-header 13. Jun 2014, 08:33 Zitat: @mkinzler: Also dein Link passt ja wie die Faust auf's Auge. Deshalb habe ich ihn ja auch gepostet. Markus Kinzler
	Zitat

champagner Registriert seit: 29. Apr 2008 46 Beiträge Delphi XE6 Professional	#8 AW: Javscript-function aufrufen, wenn function im HTML-header 13. Jun 2014, 11:46 Zitat von Sir Rufo: ...und dann sollte ein Licht angehen ... Tja, es bleibt leider sehr dunkel. Darf ich nochmals nachfragen, wo ich ansetzen kann? Herzlichen Dank.
	Zitat

mkinzler (Moderator) Registriert seit: 9. Dez 2005 Ort: Heilbronn 39.851 Beiträge Delphi 11 Alexandria	#9 AW: Javscript-function aufrufen, wenn function im HTML-header 13. Jun 2014, 11:54 Den Code der JS-Funktion musst Du in den String schreiben und dann EvaluateJavaScript() übergeben. Genauso, wie es im Beispiel auch steht. Markus Kinzler
	Zitat