23

I want to execute JavaScript code by using CefSharp in Windows Forms, but it does not work. The code is as following, and the message test is not shown. Did I miss something?

var browser = new ChromiumWebBrowser("http://localhost:50056/simple.aspx");
browser.Name = "Simple Page";
browser.Dock = DockStyle.Fill;            
this.Controls.Add(browser);
browser.ExecuteScriptAsync("alert('test');");
Uwe Keim
  • 39,551
  • 56
  • 175
  • 291
Pei-Chun Tsai
  • 233
  • 1
  • 2
  • 6

2 Answers2

37

You must wait for the browser to have sufficiently loaded before executing JavaScript. It's tempting to start trying to access the DOM in OnFrameLoadStart, whilst the V8Context will have been created and you will be able to execute a script the DOM will not have finished loading. If you need to access the DOM at its earliest possible point, subscribe to DOMContentLoaded.

Some examples of executing JavaScript are below.

browser.RenderProcessMessageHandler = new RenderProcessMessageHandler();

public class RenderProcessMessageHandler : IRenderProcessMessageHandler
{
  // Wait for the underlying JavaScript Context to be created. This is only called for the main frame.
  // If the page has no JavaScript, no context will be created.
  void IRenderProcessMessageHandler.OnContextCreated(IWebBrowser browserControl, IBrowser browser, IFrame frame)
  {
    const string script = "document.addEventListener('DOMContentLoaded', function(){ alert('DomLoaded'); });";

    frame.ExecuteJavaScriptAsync(script);
  }
}

//Wait for the page to finish loading (all resources will have been loaded, rendering is likely still happening)
browser.LoadingStateChanged += (sender, args) =>
{
  //Wait for the Page to finish loading
  if (args.IsLoading == false)
  {
    browser.ExecuteJavaScriptAsync("alert('All Resources Have Loaded');");
  }
}

//Wait for the MainFrame to finish loading
browser.FrameLoadEnd += (sender, args) =>
{
  //Wait for the MainFrame to finish loading
  if(args.Frame.IsMain)
  {
    args.Frame.ExecuteJavaScriptAsync("alert('MainFrame finished loading');");
  }
};
Pang
  • 9,564
  • 146
  • 81
  • 122
amaitland
  • 4,073
  • 3
  • 25
  • 63
  • 4
    The next major version of `CefSharp` will throw an exception with your original code in an attempt to self documenting rather than just silently doing nothing. – amaitland Jul 01 '15 at 08:52
  • 2
    More details in https://github.com/cefsharp/CefSharp/wiki/Frequently-asked-questions#CallJS – amaitland Sep 24 '16 at 23:27
  • 1
    For the latest see https://github.com/cefsharp/CefSharp/wiki/General-Usage#when-can-i-start-executing-javascript – amaitland May 28 '18 at 09:18
  • 1
    Also a really clear video here -> https://archive.org/details/ExecutingJavaScriptFromThe.NETSideUsingCefSharp_201711 – JsAndDotNet Nov 01 '19 at 11:42
2

I think, in the case of calling a JavaScript function that exists inside HTML, and passing input arguments, one can simply use the Browser.LoadingStateChanged event in the MainWindow constructor to make sure loading is initiated. This event will be called after the Browser_Loaded, where the HTML file is declared. Following is an example of the code:

public MainWindow()
        {
            InitializeComponent();

            //Wait for the page to finish loading (all resources will have been loaded, rendering is likely still happening)
            Browser.LoadingStateChanged += (sender, args) =>
            {
                //Wait for the Page to finish loading
                if (args.IsLoading == false)
                {
                    Browser.ExecuteScriptAsync("JavaScripFunctionName1", new object[] { arg1, arg2});
                }
            };
        }

private void Browser_Loaded(object sender, RoutedEventArgs e)
        {
            Browser.LoadHtml(File.ReadAllText(GetFilePath("YourHTMLFileName.html")));
        }

However, if you want to execute the JavaScript code and get results, you should use:

var result = await Browser.EvaluateScriptAsync("JavaScripFunctionName2", new object[] { });
MessageBox.Show(result.Result.ToString());

In HTML:

<html>
<body>
    <script>
        function JavaScripFunctionName1(arg1, arg2)
        {
            // something here
        }

        function JavaScripFunctionName2()
        {
            // something here
            return result;
        }        
    </script>
</body>
</html>
Aram
  • 29
  • 3