CefSharp LoadHtml

Update: CefSharp has a new LoadHtml(string html) method that loads the HTML as a base64-encoded data URI. It is more reliable that the LoadHtml(string html, string url) method described below.

In LoadHtml(string html, string url):

html is your HTML string, e.g. "<html><body>Hello world</body></html>". Actually, you can even put other content in the string, such as SVG markup, as long as Chromium can understand it.

url is needed because your HTML code may contain JavaScript that tries to perform AJAX calls, and the web browser needs to understand what security restrictions apply. The scheme (e.g. "http:", "about:") and domain (e.g. "localhost", "google.com") affect behaviour such as clicking on links, AJAX requests, iframes, etc.

If you want to simply render static HTML, make the url something unique such as http://rendering/ (so that the resource handler does not overlap with a real url on the web). If you need to load the HTML and then interact with it or perform AJAX calls, choose a url that matches the domain you want to interact with - for example, if you want to make an alternative Google home page and perform AJAX search queries, you will want to use https://www.google.com/ as your URL so you can communicate with it.

You can see the source code for LoadHtml here.

What CefSharp does is:

  1. Register a resource handler for the given url.
  2. Call Load(url) to tell Chromium to load the given url.

Then, under the hood:

  1. Chromium requests the url.
  2. The resource handler intercepts the request, and returns your html.
  3. Chromium renders your html instead of the real content of the URL.

For a WPF project, try the following.

Create a namespace reference to CefSharp.Wpf in the xaml.

xmlns:cef="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"

Add the ChromiumWebBrowser element to your window.

<cef:ChromiumWebBrowser x:Name="browser" IsBrowserInitializedChanged="browser_IsBrowserInitializedChanged"></cef:ChromiumWebBrowser>

Remember to assign a name to the element (in this case the element is called browser). We will use it to call the LoadHtml method later on.

Create an event handler for the IsBrowserInitializedChanged event. This is important, because this event will be fired once the ChromiumWebBrowser control is ready. Then can we load html.

Putting it all together...

MainWindow.xaml

<Window x:Class="CEF.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:CEF"
    xmlns:cef="clr-namespace:CefSharp.Wpf;assembly=CefSharp.Wpf"
    mc:Ignorable="d"
    Title="MainWindow" Height="350" Width="525">
    <Grid>
        <cef:ChromiumWebBrowser x:Name="browser" IsBrowserInitializedChanged="browser_IsBrowserInitializedChanged"></cef:ChromiumWebBrowser>
    </Grid>
</Window>

MainWindow.xaml.cs

using System.Windows;

namespace CEF
{
    public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private void browser_IsBrowserInitializedChanged(object sender, DependencyPropertyChangedEventArgs e)
        {
            // the browser control is initialized, now load the html

            browser.LoadHtml("<html><head></head><body><h1>Hello, World!</h1></body></html>", "http://www.example.com/");
        }
    }
}

Try the following code

Cef.Initialize(new CefSettings());

ChromiumWebBrowser browser = new ChromiumWebBrowser(string.Empty) {
    Location = new Point(0, 0),
    Dock = DockStyle.Fill
};

//add to a System.Windows.Forms.Form or some other container.
this.Controls.Add(browser);
//the url parameter does not have to be an existing address.
browser.LoadHtml("<html><head></head><body><h1>Hello, World!</h1></body></html>", "http://www.example.com/");

Hope this helps.

Tags:

C#

Chromium Embedded

Cefsharp

Recent Posts