19

Could someone explain to me how the CefSharp LoadHtml function works?

LoadHtml(string html, string url)

What do the html and url parameters represent?

I am interested in loading a page from a raw HTML string into the CefSharp browser.

Uwe Keim
  • 39,551
  • 56
  • 175
  • 291
G-Man
  • 7,232
  • 18
  • 72
  • 100

3 Answers3

44

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.
Yoshi
  • 3,325
  • 1
  • 19
  • 24
  • 1
    Also the scheme has to be valid (eg can't use "oob://") otherwise the ResourceHandler just creates a Load Error (even though the URL is never going to be loaded). – Appetere Apr 15 '15 at 11:04
  • 1
    This appears to be out of date with CefSharp 43. – William Jockusch Apr 07 '16 at 08:08
  • Not sure if it is a later version issue, but I found if I supplied the url it wouldn't render my string. the sample on the cefsharp page shows no url https://github.com/cefsharp/CefSharp/blob/335c884b08caa74aba06a056105de30d3d0bc7c6/CefSharp.Example/JavascriptBinding/JavascriptCallbackBoundObject.cs – David Wilton Sep 04 '19 at 06:22
  • 1
    @DavidWilton that overload has a different implementation. It loads the HTML as a data-uri: https://github.com/cefsharp/CefSharp/blob/e3fcc90c2dd99a561d5c17ef046e47153af81eb6/CefSharp/WebBrowserExtensions.cs#L432 – Yoshi Sep 05 '19 at 00:36
  • LoadHTML(myHtml) works to render an html page. LoadHTML(myHTML, myURL) has yet to work with any value of myURL, e.g. "http://mydomain/". I get a mostly empty page with protocole reported as chrome-error:. Is there some config needed to make it work? – R. Romero Sep 11 '19 at 19:52
  • @R.Romero it has to be a valid URL with a scheme. Try "http://rendering/" – Yoshi Sep 12 '19 at 05:55
6

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.

  • I download version 49.0.1 and I can't find the method `LoadHtml` any more, Is there any alternative method? – Nguyen Minh Binh Jul 04 '16 at 04:03
  • @Nguyen Minh Binh The LoadHtml method is present in the 49.0.1 source code - https://github.com/cefsharp/CefSharp/blob/cefsharp/49/CefSharp/WebBrowserExtensions.cs#L271 . Maybe try to compile the source code? –  Jul 04 '16 at 04:21
  • I checked again, The method `LoadHtml` was move to `WebBrowserExtensions` package from v43. Before this version, this method available inside `CefSharp.Wpf` package. `https://github.com/cefsharp/CefSharp/blob/cefsharp/41/CefSharp.Wpf/ChromiumWebBrowser.cs` Btw, I still don't know how to call this method rightnow from my ChromiumWebBrowser instance. – Nguyen Minh Binh Jul 04 '16 at 04:34
  • @Nguyen Minh Binh - Have a look at line 173 - https://github.com/cefsharp/CefSharp/blob/cefsharp/49/CefSharp.Wpf.Example/ViewModels/BrowserTabViewModel.cs#L163 –  Jul 04 '16 at 12:45
  • Thank you for your time, but How to call this method from ChromiumWebBrowser instance? In my case, I decide to pull v41 and It works. I think this should be consider for whom want to use latest version. – Nguyen Minh Binh Jul 04 '16 at 14:13
  • 3
    It should be `CefSharp.WebBrowserExtensions.LoadHtml(browser, "

    Hello, World!

    ", "http://www.example.com/");`     – Gianni Ciccarelli Oct 26 '16 at 10:50
  • @NguyenMinhBinh the LoadHtml is an extension method located in the CefSharp namespace. You need to add an using directive like this: using CefSharp; – Björn Jan 05 '17 at 08:45
  • I just needed to import WebBrowserExtensions and LoadHtml will appear – Nick Chan Abdullah Jan 24 '19 at 09:10
4

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/");
        }
    }
}