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.
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.
Update: CefSharp has a new
LoadHtml(string html)
method that loads the HTML as a base64-encoded data URI. It is more reliable that theLoadHtml(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:
url
.Load(url)
to tell Chromium to load the given url
.Then, under the hood:
url
.html
.html
instead of the real content of the URL.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.
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...
<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>
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/");
}
}
}