September 22, 2012 分类: ASM/C/C++     作者: hoverlees     留言: 94

浏览器嵌入窗口程序一直以来就是WEB应用程序的首选方案,这种方案只需要实现一个主窗口,并提供一些接口供脚本调用,内部的界面和逻辑处理全部用html,css,javascript去实现。我最早看到的相关应用是四五年前的新浪聊天室。我本人在后来的一些项目中也多次用到这种基于IE内核的实现方式。

随着HTML5的强大,嵌入浏览器方式比嵌入Shockwave Flash的方式更应该作为首选方案。本文介绍嵌入IE,Chrome,Firefox三种方式。

本文链接: http://www.hoverlees.com/blog/?p=1339

1.嵌入IE浏览器

嵌入IE内核应该是早期最常用的方法,使用windows平台上的ActiveX方式,将IWebBrowser2对象嵌入到窗口中,IWebBrowser2接口涉及到很多的接口,可以让我们进行事件处理、操作DOM、与JS通信,使用一个连接点接口与浏览器内部连接,获取和处理事件。

使用IE内核有一个缺点就是用户的操作系统各种各样,内核也是多个版本而且不兼容(只有IE9+才支持HTML5)。导致程序非常不稳定,再有就是不能跨平台。以至于现在嵌入IE应该是最差的方式了。

2.嵌入Firefox

Mozilla的XULRunner是一个跨平台的浏览器应用框架,被Mozilla用于Firefox和ThunderBird等软件的核心,同样是开源和支持HTML5,项目使用XPCOM方式实现,除了XPCOM对象(windows系统的在xpcom.dll中)的获取外,其它属性,对象和函数的访问均与MDN上Javascript的文档相同,可谓文档齐全。同样也有已经实现的第三方C++项目将基于XULRunner的浏览器封装成控件,非常方便使用。

MDN地址:https://developer.mozilla.org/en-US/docs/XULRunner

3.嵌入Chrome

Embedding Chrome:经过本人的研究,个人认为嵌入Chrome是最好的解决方案,Chrome本身开源,高效的v8引擎。同时也有很多附属的开源项目,libcef就是其中一个,cef是chrome embed framework的缩写,意在实现chrome嵌入应用程序,本人对这个项目下载下来后进行过测试,效果非常好,支持HTML5,同时跨平台。

项目地址:http://code.google.com/p/chromiumembedded/

下面是libcef调用的示例程序,给大家做参考。

/**
 * libcef test application.
 * @author Hoverlees me[at]hoverlees.com
 */
#include <iostream>
#include <Windows.h>

#include "HoverWindow.h"
#include <include/cef_browser.h>
#include <include/cef_app.h>
#include <include/cef_client.h>

class MyChromeClient:public CefClient{
private:
	int refCount;
public:
	MyChromeClient(){
		refCount=1;
	}
	virtual int AddRef(){
		refCount++;
		return refCount;
	}
	virtual int Release(){
		refCount--;
		return refCount;
	}
	virtual int GetRefCt(){
		return refCount;
	}
};

class MyChromeApplication:public CefApp{
private:
	int refCount;
public:
	MyChromeApplication(){
		refCount=1;
	}
	virtual int AddRef(){
		refCount++;
		return refCount;
	}
	virtual int Release(){
		refCount--;
		return refCount;
	}
	virtual int GetRefCt(){
		return refCount;
	}
};

class ChromeWindow:public HoverWindow{
private:
	CefWindowInfo windowInfo;
	MyChromeClient client;
	CefRefPtr<CefBrowser> browser;
public:
	ChromeWindow(HINSTANCE hInstance,const char* className,const char* title,
		int x,int y,int w,int h,DWORD exStyle=NULL,DWORD windowStyle=WS_OVERLAPPEDWINDOW);
	virtual bool onWindowMessage(HWND hWnd,UINT uMsg,WPARAM wParam,LPARAM lParam);
};
ChromeWindow::ChromeWindow(HINSTANCE hInstance,const char* className,const char* title,
	int x,int y,int w,int h,DWORD exStyle,DWORD windowStyle)
	:HoverWindow(hInstance,className,title,x,y,w,h,exStyle,windowStyle){

}
bool ChromeWindow::onWindowMessage(HWND hWnd,UINT uMsg,WPARAM wParam,LPARAM lParam){
	RECT rt;
	switch(uMsg){
	case WM_CREATE:
		GetClientRect(hWnd,&rt);
		windowInfo.SetAsChild(hWnd,rt);
		this->browser=CefBrowserHost::CreateBrowserSync(windowInfo,&client,CefString("http://www.hoverlees.com"),CefBrowserSettings());
		CefRunMessageLoop();
		break;
	case WM_SIZE:
		GetClientRect(hWnd,&rt);
		SetWindowPos(this->browser->GetHost()->GetWindowHandle(),0,rt.left,rt.top,rt.right,rt.bottom,0);
		break;
	case WM_CLOSE:
		CefQuitMessageLoop();
		PostQuitMessage(0);
		break;
	default:
		return false;
	}
	return true;
}

int WINAPI WinMain(HINSTANCE hInst,HINSTANCE hPrevInstance,LPSTR lpCmdLine,int nCmdShow){
	MyChromeApplication app;
	CefMainArgs main_args(hInst);
	CefSettings settings;
	settings.multi_threaded_message_loop = false;
	int exit_code = CefExecuteProcess(main_args,&app);
	if (exit_code >= 0)
	return exit_code;
	CefInitialize(main_args,settings,&app);
	ChromeWindow* window=new ChromeWindow(hInst,"hover","Chrome Embedding - http://www.hoverlees.com",0,0,400,400);
	window->startMessageLoop();
	CefShutdown();
	return 0;
}

其中CefClient包含一些虚函数可以获取一些对象以获取浏览器事件和设置浏览器相关功能,一般用Client类同时实现,然后返回this即可。如下示例.具体可以参考自带的类文档。

class MyChromeClient:public CefClient,public CefLoadHandler{
public:
	virtual CefRefPtr< CefLoadHandler > GetLoadHandler(){
		return this;
	}
	//CefLoadHandler的其中一个虚函数实现,当页面加载完成时执行此函数
	virtual void OnLoadStart( CefRefPtr< CefBrowser > browser, CefRefPtr< CefFrame > frame ){
		MessageBox(0,frame->GetURL().ToString().c_str(),0,0);
	}
};

http://www.hoverlees.com/diy/sources/HoverWindow.h

http://www.hoverlees.com/diy/sources/HoverWindow.cpp

标签: ,
访客留言[谢谢!]
畅想
你好,看了你的博客,你懂软件,硬件这么多东西,而且都很深入,真让人佩服!这几天我在做把Embedding Chrome嵌入到客户端,可否把你写的嵌入Chrome的这个程序给我发一下,谢谢!
2013-02-13 09:05:21
hoverlees
你好,程序就是文章中帖的那个,关键是要去下载libcef,并编译成动态库及静态链接导出库,然后就可以编译这段代码了。
2013-02-13 17:25:57
小抓
现在正在做一个程序,刚好是需要嵌入chorme浏览器,看到你这篇介绍后肯定很受用,能不能跟你请教一些问题呢?
2012-12-26 09:45:54
hoverlees
你好,可以直接留言或走Email.
2012-12-27 09:16:42
无名氏
请问这个是能兼容64位和32位的吗?
2014-01-22 15:58:10
hoverlees
兼容。
2014-01-22 20:47:45
ghq1254544150
您好,最近用到了OpenWebKitBrowser的插件,但是在这个里面应用的video标签不可以使用,网上找了很久,但是相关的资料也太少。现在就是想请教一下您这个问题可以怎么解决的?
2014-08-11 09:49:31
hoverlees
不了解啊,没用过那个控件。
2014-08-14 10:04:00
xing
frameLoadEnd 时 我要如何去获取当前iframe document 一直研究不出来
2014-03-10 01:33:39
hoverlees
应该拿到并操作CefV8Context
2014-03-12 13:38:36
www.wuleba.com
博主,你好!找了几天资料,我只找到C#调用JS的方法: var mainFrame = browser.Browser.GetMainFrame(); mainFrame.ExecuteJavaScript("show()",url, 0); 但是,我现在需要实现:JS调用C#方法,不知道怎么写?
2013-10-28 17:18:32
hoverlees
最简单的方法是监听导航事件,当url是你指定的格式时,调用你的函数,如URL满足 action://function/params 格式时,调用你指定的函数。这时,js只要实现 location.href="action://function/params"即可。 如果是使用IE内核,C#可以设置WebBrowser的ObjectForScripting属性,C#基本不用,具体可看msdn.
2013-10-29 09:37:48
dongweiq
请问您嵌入的这个chrome框架是否支持canvas绘图?
2013-12-05 10:24:17
hoverlees
支持的,包括WebSocket,WebGL,WebRTC等HTML5的所有特性。
2013-12-06 09:23:19
穿越
你好,有C#中嵌入Chrome的示例代码吗?
2014-01-09 22:12:09
hoverlees
不好意思没有啊,我不会C#
2014-01-10 09:09:01
奋斗小鸟
你好,大侠 能否给我下这个工程源码让我参考一下,只是这样看我还是搞不定,希望大侠助助小弟!
2014-03-19 16:23:27
hoverlees
不好传的哦,原代码网上有的下载,编译好的文件也有好几十MB大小。建议直接下载编译libcef
2014-03-20 22:49:07
青云
博主,你好! 我在cef.client中加了一个像chrome 的tab控件,然后想把tab控件和相应的浏览器页面关联起来。 遇到的问题是,打开的每个子页面都是独立的,不想chrome浏览器能在一个界面上显示。 这个问题怎么解决了
2013-12-11 14:14:47
hoverlees
tab控件不应该属于cef client里面的一部分,而是独立的窗口控件。比如,上面是四五个按钮,下面是5个cef client窗口,按其中一个按钮,都是显示某一个client而隐藏其他几个。 如果你真要把tab做到网页里,那只需要一个控件,里面是你自己用html做的tab和一些iframe,那完全就是html的技术了。
2013-12-11 20:29:46
LHX
你好,请问能否将一个应用程序嵌入到浏览器中,例如,有一个.exe的应用程序,能否将次应用程序嵌入到浏览器中,给人的感觉就好像是这个应用程序是在浏览器中运行的一样
2013-12-12 14:37:42
hoverlees
可以是可以的,是做成浏览器插件。flash的插件就是使用这种方式嵌入到浏览器中的,具体的实现,对于windows的IE而言,一般是使用activeX方式嵌入,其他平台的浏览器大多数使用NPAPI插件架构嵌入。但都不是exe,而是dll之类的动态链接库。
2013-12-13 09:31:24
qijunmi
你好,请教一下。现在我想通过java做个界面嵌入CEF的东西以嵌入blink内核的客户端,这其中我的理解是需要用到JNI来实现吧...如果用到JNI,应该就打破了Java的跨平台特性,那么如果要在linux和windows下都做一个嵌入blink的客户端,是否就需要为两种系统编写不同的代码,以生成相应的JNI呢。
2014-04-15 09:51:00
hoverlees
其实cef也是跨平台的,只是窗口那儿的封装需要针对不同操作系统做单独开发,例如windows的窗口api或qt之类的窗口api.
2014-04-15 13:08:41
浪里の寻花
编译例子的时候,出现了这个错误:error C2660: 'CefBrowserHost::CreateBrowserSync' : function does not take 4 arguments。这一段里的函数少一个参数:this->browser = CefBrowserHost::CreateBrowserSync(windowInfo, &client, CefString("http://www.hoverlees.com"), CefBrowserSettings());
2014-02-07 14:36:19
hoverlees
嗯,那这个应该是新版本的cef添加了参数
2014-02-08 09:11:42
小雾
我想问一下那个hoverwindos.h,库里貌似没有呀,去哪里下载
2013-09-24 09:48:12
hoverlees
你好,就在文章最后啊
2013-09-24 13:39:48
420chen
找了好久 终于知道思路了 楼主 赞一个
2014-05-24 11:39:24
axiu
请教一下,我现在一个项目需要将CEF CHrome 嵌入到JAVA SWT 中,请问一下在OSGI Bundle插件项目下,如何集成 CEF,有示例就更好了!谢谢 我的邮箱junxiu_1218@126.com
2013-10-15 16:13:35
hoverlees
你好,需要自己实现一个OLE窗口组件封装libcef,然后再嵌入到swt中。
2013-10-17 09:27:50
interface
那个学校的朋友 ?
2013-04-16 17:58:28
hoverlees
你好,江大的,目前复旦在读。
2013-04-17 11:31:11
无名氏
没有HoverWindow,不能编译
2013-04-17 15:00:31
hoverlees
你好,已添加.
2013-04-17 21:41:44
Danny
你好,我现在基于asp.net、HTML5开发了一个Web项目,项目需要和一个WinForm大项目集成,所以想在WinForm中设计一个窗体,嵌套Google浏览器,加载web网站,亲能否给个实例程序或者解决方案呢?跪求指导...
2013-09-04 21:12:11
hoverlees
你好,只需要参考我上面的例子即可以把chrome作为控件嵌入到应用程序中。你首先需要下载libcef(可以直接下载编译好的库)
2013-09-05 09:18:08
fanfan
你好,看了你的介绍cef的帖子,觉得很不错,不知可否请教你几个问题:那就是你有没碰到过cef浏览器缓存更新方面的问题,我使用类似下面的语句 CefSettings settings; CefString(&settings.cache_path).FromASCII(".\\cache"); 为浏览器设置了缓存,但是却发现页面更新出了问题。如果碰到过可否传授下解决方法,不甚感激!
2014-03-03 14:59:14
hoverlees
你好,不好意思没涉及到这方面哦。直觉上感觉用./cache可能会有问题,用绝对路径试一下呢?还有就是试试不要直接给cefSetting设置值,而是通过CefSetting::set方法试一下。
2014-03-03 20:32:15
hufuman
你好,我想问下,LICEF是否没有添加Skia和V8?
2013-03-21 14:13:09
hoverlees
不好意思,今天看到chrome有用skia的。 canvas就是它实现的,cef将其封装并没有导出。
2013-03-22 13:01:33
hoverlees
你好,Skia不是chrome的东西吧。 V8是肯定有的,画图可以用Canvas。
2013-03-21 20:46:32
bao
你好,能发一份完整的源码给我吗?急用,你发的链接我好像找不到!
2014-10-21 15:46:35
hoverlees
http://cefbuilds.com/
2014-10-21 17:45:00
Jackie
请问你这是用的libcef3还是1呀?
2013-08-04 13:39:38
hoverlees
你好,是cef_binary_3.1180.719
2013-08-04 21:05:44
jsptop
你好,请把整个项目文件给我发一份,非常感谢,由于初学c++编程,不知道怎么引用和配置,自己研究了很长时间也没有成功,谢谢!
2014-11-03 15:38:02
hoverlees
不好意思没有了,您可以到 http://www.cefbuilds.com 去下载编辑好的静态库和动态库,通过调用库来实现。
2014-11-03 17:47:43
fanfan
谢谢你!虽然你没有解答出我的问题,但我认你为你是一个good man!!你很乐于助人,perfect IT 人!
2014-03-04 17:56:16
fanfan
你好,我看了你回复别人的,你是江大的啊!真的很意外,我也是江大的O(∩_∩)O~
2014-03-04 18:00:59
xao
请问你这只兔子是怎么回事。。。怎么弄的
2014-11-20 00:03:54
hoverlees
canvas加背景
2014-11-20 19:07:32
AilnIndex
大神啊
2014-11-21 18:26:31
Phil
你好,目前有个需求,WinForm程序要加个浏览器,实现简单功能有例子吗,用VS自带的浏览器控件加载大的网站会卡,求解决例子走邮箱 还有个问题,WinForm程序内的浏览器在WIN8.1系统平板上URL可以调出虚拟键盘,但是打开百度点搜索框却调不出虚拟键盘,大神有什么好思路解决吗(今天解决一天没找到问题所在) 感谢宝贵时间
2014-12-03 19:10:49
hoverlees
你好,我现在只有上传到文章的例子代码。 win8相关的我现在也不大研究,所以无法给点建议哦~
2014-12-05 09:58:45
MaxKJ
读了一下,给予了非常大的帮助,谢谢!
2015-01-16 16:06:33
121313
你好,CefString类型与string怎么转化不出现乱码?
2015-04-13 09:10:10
hoverlees
CefString应该有类似 c_str的函数取得 char* ,然后通过char*构造string.
2015-04-13 12:55:22
juney
你好,能够提供QT嵌套谷歌浏览器的实例的吗
2015-06-04 17:46:57
道明寺
博主,请问要如何使这个支持flash?已下载到了插件但不知道如何使用。 依旧couldn't load plugin!!!
2016-01-12 18:44:41
hoverlees
新版的chrome已经不支持旧的NPAPI插件,只支持PPAPI的插件. 还好的是,flash有PPAPI版的插件,需要到官网上下载.
2016-01-17 08:51:45
收到
libcef在加载html的时间只加载了html的功能部分 而关于显示的样式这部分没有加载成功
2015-11-17 14:11:04
hoverlees
css引用在head里一般不会,如果对显示有很高的要求,可以先隐藏dom,js在onload事件时显示dom.
2015-11-23 16:47:50
jamie
你好,最近刚好在做这样的一个项目,但是无法浏览带证书的https的网站,有解决方案吗
2016-01-07 14:41:27
hoverlees
看看启动参数里有没有允许自签名https访问的配置,有的话就设置一下就好了
2016-01-17 08:52:49
NPAPI 浏览器插件 | 李志强个人博客
[...] HTML5浏览器嵌入窗口程序解决方案http://www.hoverlees.com/blog/?p=1339 [...]
2015-12-05 14:00:09
avi9111
冒泡哦,2012年的4,5年前,现在就是10年前啊,我10年后的今天才开始弄cef,这5年都在弄手机
2016-01-18 14:38:41
hoverlees
十年前是用IE内核,那时候是没有cef的 :)
2016-01-22 14:32:28
....
程序报错,APPcrash,问题模块libcef.dll,系统WIN7 64位
2016-04-20 10:25:35
hoverlees
应该是您的程序问题
2016-05-16 22:09:20
hanny
作者真的好敬业,16年1月22日还有回复。。。 我先去测试。。。。。
2016-02-18 10:12:47
hanny
咋样才能支持Vedio标签呢??
2016-02-18 15:19:44
hoverlees
不是不支持video,而是不支持你的视频格式, chromium是不支持有版权的视频格式的 ,如mp4,但支持ogv,webm等. audio也一样,不支持mp3,但支持ogg
2016-02-19 11:49:40
hanny
谢谢您的回答,我转成webm格式后展示页面,但是视频 是不动的,像个图片。 我是直接用例子执行的,还没有自己写程序。
2016-02-19 14:54:26
hoverlees
你看看有没有设置自动播放? 或者显示播放控件
2016-02-24 13:27:47
shaoniana7
大神你好,现在我是已经把cef3嵌套到mfc里面了,但是会出现崩溃现象,一种崩溃是如果加载大的图片(一兆多),多次点击图片的时候,会崩溃。另一种情况就是不知道什么情况下,就突然崩溃了。网上查有说是v8引擎的问题,但是也有可能有是我自己的代码有问题,我也不清楚到底是哪的问题。大神有没有遇到过这种情况,或者说,给点意见,现在查资料已经查的心碎了,感觉像是无头苍蝇啊。
2016-05-16 15:43:32
hoverlees
我一直在用cef3,从来没有遇到过这种情况,应该是您的程序哪里有问题,cef3是很稳定的. 另外,不能用我这里的代码了,我这里的代码很旧了.
2016-05-16 22:08:56
shaoniana7
代码没有用您这个示例. 如果是我的程序有问题的话,能不能给些思路呢,我现在不知道是自己哪里写的有问题,也不知道如何测试排除,崩溃时的崩溃信息显示错误模块是libcef.dll.另外,我是把用cef3显示的页面加载到了mfc的对话框里面,不知道您的网页是不是显示到浏览器中的。
2016-05-18 11:28:24
hoverlees
可以单步调试.
2016-05-20 09:36:31
yimei
楼主你好,最近我有一个项目要用到cef,请问cef是否支持在静态库中使用呢,我在win32项目中可以正常使用,但是将代码移植到静态库中就不能使用,具体的流程是这样的:静态库中提供一个接口供其他的程序时候,这个接口创建一个线程,在线程中使用cef弹出一个浏览器窗口,我这边的情况是窗口能够正常弹出,CefExecuteProcess返回的值也是正确值(-1),但是html页面就是没有正常加载,代码如下 DWORD WINAPI ProcCreateRightInfoPanelWindow(LPVOID lpParameter) { CefMainArgs main_args(_histModule); CefRefPtr app(new SimpleApp); int exit_code = CefExecuteProcess(main_args, app.get(), NULL); WCHAR buf[16]; wsprintfW(buf, L"%d",exit_code); WindowsSDKTool::SfWriteLog(buf); if (exit_code >= 0) { // The sub-process has completed so return here. return exit_code; } CefSettings settings; #if !defined(CEF_USE_SANDBOX) settings.no_sandbox = true; #endif // Initialize CEF. CefInitialize(main_args, settings, app.get(), NULL); // Run the CEF message loop. This will block until CefQuitMessageLoop() is // called. CefRunMessageLoop(); // Shut down CEF. CefShutdown(); return 0; },这个是调用cef的子线程, BOOL WindowsSDKTool::SfCreateRightInfoPanel(HWND shellViewWnd) { HANDLE thread1; thread1 = CreateThread( NULL, 0, ProcCreateRightInfoPanelWindow, (LPVOID)shellViewWnd, 0, NULL); return TRUE; },这个是提供外部使用的接口
2016-08-15 11:28:47
hoverlees
可以在静态库中使用,把你的库生成为静态库就行了.
2016-09-06 18:05:19
haiwa
感谢您一直对大家的回复,我有个问题,cookie写了之后不管有效期有多长,关闭窗口再打开就没有用了,这个如何解决?非常感谢。
2016-11-28 01:29:32
hoverlees
您要自己实现cookie的逻辑了, 把cookie写到文件啥的.
2016-12-28 13:35:40
安静
我想咨询下 怎么样实现背景透明化,网页那边背景已经设置成透明了,窗体这边也设置透明了,但是不管怎么样 都会有个白色底色,,其实是已经透明了,鼠标可以点穿!! 但是那个白色底色不知道怎么去了
2016-12-31 14:44:46
hoverlees
这个倒是没弄过, 您可以试试SetWindowRgn,把窗口裁剪下看看行不行.
2017-01-11 10:16:23
ggg
你好!请问一下,我运行demo,然后访问特定的一个网页(比较复杂),程序不会有崩溃,但是我把demo里面的代码,拿到Qt工程下面,一样的调用,再访问这个网页,会崩溃,这种情况最有可能是因为什么原因?
2017-05-17 10:40:05
hoverlees
这个就不清楚了,要调试程序,看看是什么错误。 建议下载最新的libcef,然后根据他的示例来写。
2017-05-25 07:49:22
无名氏
我想把cef整合到activex里去,请问可有办法?给个demo呗
2017-02-04 14:01:26
hoverlees
没有封装过, 其实也没必要
2017-02-14 19:55:33
无名氏
大神你好,我初学cef,把页面嵌入窗口程序后一些导出打印功能点击后不能弹出文件对话框,博主知道可能是什么原因造成的吗
2018-07-02 21:32:54
hoverlees
这个功能你得自己去实现的.
2018-07-04 22:09:11
无名氏
你好,js如何调用pc端给的方法。如页面一开始要调用pc端塞给web的数据,这步web js要如何实现
2018-03-26 14:09:57
hoverlees
需要c++端实现相关js全局对象, 然后js调用这个对象.
2018-05-07 10:52:18
NPAPI 浏览器插件 – 李志强个人博客
[...] HTML5浏览器嵌入窗口程序解决方案http://www.hoverlees.com/blog/?p=1339 [...]
2019-03-05 09:22:12
我来留个言

您的电子邮箱我一定会保密的哦!

昵称

邮箱

评论内容