CefSharp LoadHtml

Asked 26/12, 2014 at 15:48 Answered 5/7, 2016 at 4:42

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.

Cortez answered 26/12, 2014 at 15:48 Comment(0)

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:

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

Then, under the hood:

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

Besnard answered 29/12, 2014 at 6:47 Comment(6)

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). – Vesicate 15/4, 2015 at 11:4

This appears to be out of date with CefSharp 43. – Gregoriagregorian 7/4, 2016 at 8:8

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 github.com/cefsharp/CefSharp/blob/… – Insolation 4/9, 2019 at 6:22

@DavidWilton that overload has a different implementation. It loads the HTML as a data-uri: github.com/cefsharp/CefSharp/blob/… – Besnard 5/9, 2019 at 0:36

LoadHTML(myHtml) works to render an html page. LoadHTML(myHTML, myURL) has yet to work with any value of myURL, e.g. "mydomain". I get a mostly empty page with protocole reported as chrome-error:. Is there some config needed to make it work? – Break 11/9, 2019 at 19:52

@R.Romero it has to be a valid URL with a scheme. Try "rendering" – Besnard 12/9, 2019 at 5:55

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.

Aribold answered 20/2, 2015 at 13:9 Comment(8)

I download version 49.0.1 and I can't find the method LoadHtml any more, Is there any alternative method? – Expecting 4/7, 2016 at 4:3

@Nguyen Minh Binh The LoadHtml method is present in the 49.0.1 source code - github.com/cefsharp/CefSharp/blob/cefsharp/49/CefSharp/… . Maybe try to compile the source code? – Aribold 4/7, 2016 at 4: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. – Expecting 4/7, 2016 at 4:34

@Nguyen Minh Binh - Have a look at line 173 - github.com/cefsharp/CefSharp/blob/cefsharp/49/… – Aribold 4/7, 2016 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. – Expecting 4/7, 2016 at 14:13

It should be

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

– Nagle 26/10, 2016 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; – Investigation 5/1, 2017 at 8:45

I just needed to import WebBrowserExtensions and LoadHtml will appear – Bowls 24/1, 2019 at 9:10

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

Aribold answered 5/7, 2016 at 4:42 Comment(1)

This worked for me var s = "<html><head></head><body><h1>Hello, World!</h1></body></html>"; browser.LoadHtml(s); – Insolation 4/9, 2019 at 6:23

MainWindow.xaml

MainWindow.xaml.cs

Recommended topics

Hot tags