C# WPF WebBrowser - how to pass an array to a javascript function

Question

I am trying to add multiple markers to a google map. The data comes from C# WPF.

Here is the C# code:

private void Button_click(object sender, RoutedEventArgs e)
{
    int[] lat = { 10, 30, 50, 70 };
    int[] lon = { 10, 30, 50, 70 };

    webBrowser1.InvokeScript("addMarker", new object[] { lat, lon });
}

Here is the javascript function embedded in a local html file:

function addMarker(Lat,Long) {
    for (var i=0;i<Lat.length; i++){
        var latLng = new google.maps.LatLng(Lat[i],Long[i]);
        var marker = new google.maps.Marker({
            position: latLng,
            title: 'Hello World!',
            map: map
        });
    }
    } // end of addMarker

When I compiled this program with VS 2015 and clicked the button to invoke this js script, I always got an error message telling me that a function is expected in this line right after 'var'

for (var i=0;i<Lat.length; i++){

The exception report by VS is like this: System.Runtime.InteropServices.COMException Exception from HRESULT: 0x80020101 and the location of the exception is right here:

webBrowser1.InvokeScript("addMarker", new object[] { lat, lon });

I am very new to Javascript programming. Please help.

Following your suggestion, the error is still there. But this time the location of error is moved to the left side of the '('. for (i=0; i — Xin Jin, Feb 07 '16 at 02:36
Check the object that's being sent to the function. I don't think it's formatted the way your loop wants to execute. Log the `Lat` and `Log` to the console. — Tah, Feb 07 '16 at 02:42
the type of Lat in JS is shown as 'unknown' with this line: alert(typeof(Lat)); How to fix? — Xin Jin, Feb 07 '16 at 02:53

score 1 · Accepted Answer · edited May 23 '17 at 11:45

As far as I know its not possible to pass an array directly.

You should pass it as a JSON-string. (I am using NewtonSoft via NuGet!)

guiWebbrowser.InvokeScript("addMarker", JsonConvert.SerializeObject(new
         {
            Lat = new int[] { 10, 20, 30 },
            Long = new int[] { 10, 20, 30 }
         }));

Your JS-function should look like this:

function addMarker(jsonArg) {
   var args = JSON.parse(jsonArg);
   for (var i = 0; i < args.Lat.length; i++) {
      var latLng = new google.maps.LatLng(args.Lat[i], args.Long[i]);
      var marker = new google.maps.Marker({
         position: latLng,
         title: 'Hello World!',
         map: map
      });
   }
} // end of addMarker

You may get this error message: JSON is undefined.

See this SO answer: https://stackoverflow.com/a/22287896/3631348

You should call this function anywhere in your app:

public void ModifyBrowserEmulation(int version = 11001)
{
   // see https://stackoverflow.com/a/22287896/3631348 --> edit your application name ! or get it via Reflection !

   var appExe = System.IO.Path.GetFileName(Assembly.GetExecutingAssembly().Location);
   Registry.SetValue(@"HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION", appExe, version, RegistryValueKind.DWord);
   Registry.SetValue(@"HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION", appExe.Replace(".exe", ".vshost.exe"), version, RegistryValueKind.DWord);

   Registry.SetValue(@"HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION", appExe, version, RegistryValueKind.DWord);
   Registry.SetValue(@"HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION", appExe.Replace(".exe", ".vshost.exe"), version, RegistryValueKind.DWord);
}

Another useful post: https://stackoverflow.com/a/31728506/3631348 how to write to the console from your JS code.

Although this is a so much delayed answer, it is correct. Thanks. — Xin Jin, Feb 15 '17 at 20:42

C# WPF WebBrowser - how to pass an array to a javascript function

1 Answers1