Daniel DirtyNative Martin Daniel DirtyNative Martin - 3 months ago 44
HTML Question

C# Webkit won't display Html

I've included the WebkitBrowser from WebKit.Net into my C# Project and it works as it should, except when I want to load a Html string. Here is the Html I want to display:

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />-->
<meta name="viewport" content="width=device-width, initial-scale=2">
<meta name="description" content="">
<meta name="author" content="">
<title>mentor+</title>
<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<link rel="stylesheet" type="text/css" href="./wicket/resource/org.apache.wicket.Application/css/style-ver-1463736306000.css" />
<link rel="stylesheet" type="text/css" href="./wicket/resource/org.apache.wicket.Application/css/landingpage-ver-1463664722000.css" />
<link rel="stylesheet" type="text/css" href="./wicket/resource/org.apache.wicket.Application/font-awesome/css/font-awesome.min-ver-1448702160000.css" />
<link rel="stylesheet" type="text/css" href="./wicket/resource/org.apache.wicket.Application/vis/vis.min-ver-1460038992000.css" />
<link rel="stylesheet" type="text/css" href="./wicket/resource/de.agilecoders.wicket.webjars.request.resource.WebjarsCssResourceReference/webjars/bootstrap/3.3.6/css/bootstrap-ver-1455709722000.css" />
</head>
<body>
<div>

</div>

<div>
<div class="container-fluid">

<div class="bs-example">

<div class="jumbotron">

<div id="mynetwork" ></div>
</div>
</div>
</div>
</div>
<footerbucket><script type="text/javascript" src="./wicket/resource/org.apache.wicket.resource.JQueryResourceReference/jquery/jquery-1.12.0-ver-1457005336000.js"></script>
<script type="text/javascript" src="./wicket/resource/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/res/js/wicket-event-jquery-ver-1457005336000.js"></script>
<script type="text/javascript" src="./wicket/resource/org.apache.wicket.Application/js/topButton-ver-1462984064000.js"></script>
<script type="text/javascript" src="./wicket/resource/org.apache.wicket.Application/js/jquery-1-12-1-min-ver-1462366394000.js"></script>
<script type="text/javascript" src="./wicket/resource/org.apache.wicket.Application/vis/vis.min-ver-1463655366000.js"></script>
<script type="text/javascript" src="./wicket/resource/org.apache.wicket.Application/js/networkgraph-ver-1463047612000.js"></script>
<script type="text/javascript" src="./wicket/resource/de.agilecoders.wicket.core.markup.html.references.JQueryMigrateJavaScriptReference/js/jquery-migrate-1.3.0-ver-1457345416000.js"> </script>
<script type="text/javascript" id="bootstrap-js" src="./wicket/resource/de.agilecoders.wicket.webjars.request.resource.WebjarsJavaScriptResourceReference/webjars/bootstrap/3.3.6/js/bootstrap-ver-1455709722000.js"></script>
<script type="text/javascript" >
/*<![CDATA[*/
Wicket.Event.add(window, "load", function(event) {
createNetwork(new vis.DataSet([{"id":0,"label":"Amalie","color":"#FA5858"},{"id":1,"label":"Daniel","color":"#2E64FE","shape":"box"},{"id":2,"label":"Carola","color":"#01DF01","shape":"ellipse"},{"id":3,"label":"Annette","color":"#58FAF4","shape":"ellipse"},{"id":4,"label":"Marius","color":"#58FAF4","shape":"box"}]),new vis.DataSet([{"id":0,"from":0,"to":1,"length":80,"width":6,"color":"#2E64FE"},{"id":1,"from":0,"to":2,"length":40,"width":6,"color":"#01DF01"},{"id":2,"from":0,"to":3,"length":40,"width":6,"color":"#58FAF4"},{"id":3,"from":0,"to":4,"length":40,"width":6,"color":"#58FAF4"}]));
;});
/*]]>*/
</script>
</footerbucket>
</html>
</body>


I used this with Cefsharp with the serveraddress and it worked:

ChromiumWebBrowser cef = new ChromiumWebBrowser();
cef.LoadHtml(responseFromServer, server + "home");


As you can see, one parameter was the serveraddress.

If i export the Html-string into a file and try to load it with any Browser, it is not working either, so I think the server address needs to be provided, but I can't find any fitting method. Please can you help me?

EDIT:



Now I edited the code from the server that it is going to work with POST parameters and it works in every Browser. Except WebKit!

The URL now looks like this:

http://mentorplus.de/networkgenerator/getNetworkgraph?network=[{%22focusPerson%22:%22Amalie%22,%22memberList%22:[{%22role%22:%22MENTOR%22,%22name%22:%22Daniel%22,%22gender%22:%22MALE%22,%22relationship%22:%22FRIENDS%22,%22emotionalRelationship%22:%22NORMAL%22,%22distance%22:%22TWOHOUR%22},{%22role%22:%22MENTOR%22,%22name%22:%22Carola%22,%22gender%22:%22FEMALE%22,%22relationship%22:%22FAMILY%22,%22emotionalRelationship%22:%22NORMAL%22,%22distance%22:%22ONEHOUR%22},{%22role%22:%22NETWORKMEMBER%22,%22name%22:%22Annette%22,%22gender%22:%22FEMALE%22,%22relationship%22:%22OTHER%22,%22emotionalRelationship%22:%22NORMAL%22,%22distance%22:%22ONEHOUR%22},{%22role%22:%22NETWORKMEMBER%22,%22name%22:%22Marius%22,%22gender%22:%22MALE%22,%22relationship%22:%22OTHER%22,%22emotionalRelationship%22:%22NORMAL%22,%22distance%22:%22ONEHOUR%22}]}]&authenticated=tellur


So what's exactly the problem of WebKit? Maybe the scripts?

EDIT 2:



Interesting, using the Standard Wpf Browser works. So i mark this thread as answered, but I am still interested in the solution

Thanks a lot!

Answer

Unfortunately, there isn't a direct way to do that using WebKitBrowser from WebKit.NET. However, it should be possible to load an HTML string by jumping through a few loops.

Internally, the WebKitBrowserCore class uses a call to _webView.mainFrame().loadHTMLString(Text, null) in the DocumentText property's set method. That confirms that at least some sort of HTML loading is possible internally. However, this method is in the native WebKit WebView, so you need to modify the project to get access to it.

I'd create a fork of the project and do the following changes.

  1. Add a new method to WebKitBrowserCore called LoadHTMLString with two parameters for HTML string, and server address.
  2. Call the _webView.mainFrame().loadHTMLString(html, server); method with the parameters.
  3. Expose the LoadHTMLString method to WebKitBrowser class the same way as others like for example Navigate method (it just calls the core's Navigate method.

I can't test this right now, so I'm not entirely sure if the internal loadHTMLString method of WebView works as intended.

Edit: Looks like you could also use the GetWebView method in WebKitBrowser, to call the mainFrame().loadHTMLString() method directly like this (syntax might be incorrect but you'll figure it out):

(IWebView)webKitBrowser.GetWebView()).mainFrame().loadHTMLString(html, server);

Edit 2: I just realized that WebKit is an open source project and it's easy to verify that loadHTMLString does what I think it does. Here's an excerpt from the WebFrame.h header file:

/*!
    @method loadHTMLString:baseURL:
    @param string The string to use for the main page of the document.
    @param URL The base URL to apply to relative URLs within the document.
    - (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)URL;
*/

HRESULT loadHTMLString([in] BSTR string, [in] BSTR baseURL);

That's the exact method you need to call and is the method CEFSharp calls internally.