Get to new skills, sharpcef,c# and JS call each other

WinForm Program embedded Google Browser, using the famous "Sharpcef". Here Science:

What is CEF?

CEF is an acronym for the Chromium Embedded framework and is an open source Web browser Control based on the Google Chromium project that supports Windows, Linux, and Max platforms. There are also porting versions in other languages, in addition to the C + + interface.

Because of chromium-based, CEF supports the HTML5 features implemented in WebKit & Chrome, and is also closer to Chrome on performance.

CEF also offers the following features: Custom plugins, custom protocols, custom JavaScript objects and extensions, controllable resource loading, navigation, context menus, and more.

Who's using CEF?

Let's take some practical examples to illustrate what we've done with CEF:

• Various browsers

  Early dual-core browsers (IE + Webkit), some using CEF as the Webkit kernel browser control.

  But for the browser, directly on the chrome extension, in fact, is the king, we are now doing so (various speed browser).

• Evernote Client (on Windows)

  Evernote allows users to paste Web pages into notes and also provides a plugin to save a webpage as a note.

  It must be on the client to render the page correctly, this task is given to CEF.

• GitHub Client (on Windows)

  GitHub also packaged the Libcef.dll, from the performance above, used to display the project's Readme page, is definitely CEF, other places of the UI, may be part of the page to achieve.

• Qq

  QQ early on through the embedded IE to achieve a number of functions and interfaces. Since last year, QQ introduced the CEF, to some previously with IE's place to replace, this can use some new features based on the WebKit, but also obtains the speed, the stability, the compatibility aspect superiority.

• Adobe edge Animate & Adobe Edge Reflow

  Adobe launches a complete set of modern web pages (or HTML5?) The tool, named Edge.

  • Adobe Edge animate, animated, enables complex animations by editing the timeline and creating originals (called symbol in Edge Animate).

  • Edge Reflow is the design the responsive web. Some people translate into response, in fact, they are self-adapting.

  The above two software, which is basically for the WebKit kernel browser, then embedded a WebKit kernel, to provide WYSIWYG preview, editing interface is necessary. They all use CEF. (The difference between CEF and pure WebKit will be described later)

• q+

  Under the concept of Web app, q+ provides a running environment for Web pages (simply, a box for the client and some APIs available) to support IE and the WebKit kernel.

  For web development students, we introduced the WebKit kernel (actually CEF), without regard to the version compatibility problem of IE, improve the development efficiency, but also can take advantage of some new HTML5 features. At that time, q+ application market, Message Center, wallpaper, music widget and other applications are based on the WebKit core development.

  The q+ project can be said to have more attempts to CEF, such as:

  • The music widget developed uses the HTML5 audio tag;

  • Some applications use the HTML5 offline function (that is, with a manifest file that), of course, there are some twists and turns, harvesting a lot of experience.

  • Packaged WebKit Debugging Tools (Dev tools).

  • Custom protocols: such as access to the QPLUS://protocol, you can redirect to a feature such as a special folder.

  • Off Screen Rendering (OSR): Layered window with off screen rendering + Windows makes irregular page windows (what shape is the opaque area of the page and what shape the window is)

Why is CEF embedded in the client?

With so many examples, the problem is much easier to say:

• Used to display Web pages, using a variety of web Service;
• Use Web pages to do the UI;
• Use HTML5 features, such as audio, canvas, etc., including CSS3 features.
• Off screens Rendering (OSR, off-screen rendering):

  The so-called OSR is not to create a real window, rendering the entire page onto a bitmap. Of course not only the rendering, there are a series of APIs to handle mouse, keyboard events, processing input method events and so on.

  This feature is especially useful when you can't use a real window, such as layered window, or in-game rendering to texture.

  With the OSR feature, you can make some interesting effects, such as:

  Alloyteam made a webtop, inside with OSR do a pure web browser, player and so on.

  There is a Awesomium project that also supports OSR, and there are already game projects with Awesomium to render pages in the game. (See Awesomium output file, it should be similar to the implementation of CEF, are the chromium package, Awesomium can do the CEF can also do)

It is said that a number of cattle x products are using the relevant technology, you crossing please see:

Nanui is the work of "Lin Xunson", a companion of the garden. Here's just a look at the pictures he collects.

Here is the text:

1, JS call C # method

Browser. Registerjsobject ("Callhostfunction", new Jscallback (browser, this));

Jscallback is a class of C # declarations, and browser is an instance of Chromiumwebbrowser. Registerjsobject indicates that a JS object is registered, and the object name is Callhostfunction.

There's a way in Jscallback, like:

<summary>        ///method first letter lowercase, otherwise JS will appear cannot find method        ///</summary> public void Callbackdemo ()        {            new Cashieactionform (). ShowDialog ();            MessageBox.Show ("JS request", "from JS");        }

Then JS should write this:

<script type= "Text/javascript" >   function Demo () {Callhostfunction.callbackdemo ();   }      function Execpayresult (para) {       alert (para);   } </script>

HTML: <input type= "button" onclick= "demo ();" value= "Do Feng ' s test" id= "Btncookies" class= "am-btn Am-btn-danger"/>

2, C # Call JS method

Browser. Executescriptasync ("Execpayresult (' 123 ')", New object[]{});

As above example is C # code inside Call JS inside Execpayresult method, and the traditional parameter ' 123 '.

Don't want to be Lei Feng. The main record is to write down the memo.

Get to new skills, sharpcef,c# and JS call each other