title: how to call js function from c# wpf
body: <p>In my WPF application I used a webbrowser control to load my local HTML page.
  I want to call function from c#(WPF App). This is working if javascript is written in HTML but if javascript is in some external file(myscript.js) then exception is throwing when calling js function from c#.</p>
  
  <p>In this code on login button a function of c# is called and from that function a javascript function is called to fill string in unsername input field.</p>
  
  <p>Here is my code.  </p>
  
  <p><strong>myscript.js, style.css, test.html</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
      function fillData(data)
      {
          var oVDiv = document.getElementById("uname");
          oVDiv.value = data;
      }
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*,
  *:before,
  *:after {
      box-sizing: border-box;
  }
  /*body{background-color:lightblue;}*/
  form {
      border: 1px solid #c6c7cc;
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -o-border-radius: 5px;
      -moz-border-radius: 5px;
      font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
      overflow: hidden;
      width: 240px;
  }
  
  fieldset {
      border: 0;
      margin: 0;
      padding: 0;
  }
  
  input {
      border-radius: 5px;
      -webkit-border-radius: 5px;
      -o-border-radius: 5px;
      font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
      margin: 0;
  }
  
  .account-info {
      padding: 20px 20px 0 20px;
  }
  
      .account-info label {
          color: #395870;
          display: block;
          font-weight: bold;
          margin-bottom: 20px;
      }
  
      .account-info input {
          background: #fff;
          border: 1px solid #c6c7cc;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
          -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
          -o-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
          -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
          color: #636466;
          padding: 6px;
          margin-top: 6px;
          width: 100%;
      }
  
  .account-action {
      background: #f0f0f2;
      border-top: 1px solid #c6c7cc;
      padding: 20px;
  }
  
      .account-action .btn {
          background: linear-gradient(#49708f, #293f50);
          border: 0;
          color: #fff;
          cursor: pointer;
          font-weight: bold;
          float: left;
          padding: 8px 16px;
      }
  
      .account-action label {
          color: #7c7c80;
          font-size: 12px;
          float: left;
          margin: 10px 0 0 20px;
      }
  /* .squaredFour */
  .squaredFour {
      width: 14px;
      position: relative;
      margin: -2px auto;
  }
  
      .squaredFour label {
          width: 20px;
          height: 20px;
          cursor: pointer;
          position: absolute;
          top: 0;
          left: 0;
          background: #fcfff4;
          background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
          background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
          border-radius: 4px;
          box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
      }
  
          .squaredFour label:after {
              content: '';
              width: 9px;
              height: 5px;
              position: absolute;
              top: 6px;
              left: 4px;
              border: 3px solid #333;
              border-top: none;
              border-right: none;
              background: transparent;
              opacity: 0;
              -webkit-transform: rotate(-45deg);
              transform: rotate(-45deg);
          }
      /*.squaredFour label:hover::after {
    opacity: 0.5;
  }*/
      .squaredFour input[type=checkbox] {
          visibility: hidden;
      }
  
          .squaredFour input[type=checkbox]:checked + label:after {
              opacity: 1;
          }
  
  /* end .squaredFour */
  * {
      box-sizing: border-box;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;!-- saved from url=(0014)about:internet --&gt;
  &lt;html oncontextmenu="return false";&gt;
  &lt;head&gt;
  &lt;title&gt;Testing&lt;/title&gt;
   &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11,IE=9; IE=8; IE=7; IE=EDGE"/&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;script src="myscripts.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body &gt;
  &lt;center&gt;
  &lt;h1 style="font-family:arial;"&gt; Please fill User and Password&lt;/h1&gt;
  &lt;form  &gt;
    &lt;fieldset class="account-info" &gt;
      &lt;label&gt;
        Username
        &lt;input  type="text"  id='uname' /&gt;
      &lt;/label&gt;
      &lt;label&gt;
        Password
        &lt;input type="password" name="password"&gt;
      &lt;/label&gt;
    &lt;/fieldset&gt;
    &lt;fieldset class="account-action"&gt;
      &lt;input class="btn" type="button" name="submit" value="Login" onclick="javascript:window.external.InvokeMeFromJavascript(document.getElementById('uname').value);"&gt;
     &lt;div class="squaredFour"&gt;
        &lt;input type="checkbox" value="None" id="squaredFour" name="check" checked  /&gt;
        &lt;label for="squaredFour"&gt;&lt;/label&gt;
      &lt;/div&gt;
    &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;/center&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>ScriptHeper.cs</strong></p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Text;
  using System.Threading.Tasks;
  using System.Security.Permissions;
  using System.Runtime.InteropServices;
  using System.Windows;
  
  namespace test
  {
  
      [PermissionSet(SecurityAction.Demand, Name = "FullTrust")]
      [ComVisible(true)]
      public class ScriptHelper
      {
          MainWindow mExternalWPF;
          public ScriptHelper(MainWindow w)
          {
              this.mExternalWPF = w;
          }
          public void InvokeMeFromJavascript(string jsscript)
          {
              //this.mExternalWPF.tbMessageFromBrowser.Text = string.Format("Message :{0}", jsscript);
              MessageBox.Show( jsscript,"Error1213", MessageBoxButton.YesNo, MessageBoxImage.Error);
              Object[] objArray = new Object[1];
              objArray[0] = (Object)"text will be filled in username input field";
              this.mExternalWPF.webBrowser.InvokeScript("fillData", objArray);// calling java script function(this call is not working when javascript is in some external file)
  
          }
      }
  }
  </code></pre>
  
  <p><strong>MainWindow.xaml.cs</strong></p>
  
  <pre><code>using mshtml;
  using System;
  using System.IO;
  using System.Windows;
  
  namespace test
  {
      [System.Runtime.InteropServices.ComVisible(true)]
      //[DllImport("TestDLL.dll", CharSet = CharSet.Auto)]
      //public static extern void DisplayMsg();
      public partial class MainWindow : Window
      {
          public MainWindow()
          {
              InitializeComponent();
              ScriptHelper helper = new ScriptHelper(this);
              this.webBrowser.ObjectForScripting = helper;
  
          }
          private void Window_Loaded(object sender, RoutedEventArgs e)
          {
  
              string curdir = Directory.GetCurrentDirectory();
              webBrowser.Navigate(String.Format("file:///{0}/test.html",curdir));           
          }
      }
  }
  </code></pre>
  
  <p><strong>MainWindow.xaml</strong></p>
  
  <pre><code>&lt;Window x:Class="test.MainWindow"
          xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
          xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
          xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
          xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
          xmlns:local="clr-namespace:test"
          mc:Ignorable="d"
          Title="MainWindow" Height="716.157" Width="1307.699" Loaded="Window_Loaded" BorderThickness="0" MinWidth="500" MinHeight="497"&gt;
      &lt;Grid&gt;
          &lt;WebBrowser x:Name="webBrowser" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5" ObjectForScripting="HtmlInteropClass"&gt;
          &lt;WebBrowser.RenderTransform&gt;
              &lt;TransformGroup&gt;
                  &lt;ScaleTransform/&gt;
                  &lt;SkewTransform/&gt;
                  &lt;RotateTransform Angle="-0.018"/&gt;
                  &lt;TranslateTransform/&gt;
              &lt;/TransformGroup&gt;
          &lt;/WebBrowser.RenderTransform&gt;
          &lt;/WebBrowser&gt;
      &lt;/Grid&gt;
  &lt;/Window&gt;
  </code></pre>
  
  <p>Any help will be appreciated.</p>
  
  <p>Thank You</p>