HTML5浏览器嵌入窗口程序解决方案

浏览器嵌入窗口程序一直以来就是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

Join the Conversation

94 Comments

Leave a Reply to hoverlees

Your email address will not be published. Required fields are marked *

  1. 大神你好,我初学cef,把页面嵌入窗口程序后一些导出打印功能点击后不能弹出文件对话框,博主知道可能是什么原因造成的吗

  2. 你好,js如何调用pc端给的方法。如页面一开始要调用pc端塞给web的数据,这步web js要如何实现

  3. 这个就不清楚了,要调试程序,看看是什么错误。
    建议下载最新的libcef,然后根据他的示例来写。

  4. 你好!请问一下,我运行demo,然后访问特定的一个网页(比较复杂),程序不会有崩溃,但是我把demo里面的代码,拿到Qt工程下面,一样的调用,再访问这个网页,会崩溃,这种情况最有可能是因为什么原因?

  5. 我想咨询下 怎么样实现背景透明化,网页那边背景已经设置成透明了,窗体这边也设置透明了,但是不管怎么样 都会有个白色底色,,其实是已经透明了,鼠标可以点穿!! 但是那个白色底色不知道怎么去了

  6. 感谢您一直对大家的回复,我有个问题,cookie写了之后不管有效期有多长,关闭窗口再打开就没有用了,这个如何解决?非常感谢。

  7. 楼主你好,最近我有一个项目要用到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;
    },这个是提供外部使用的接口

  8. 代码没有用您这个示例. 如果是我的程序有问题的话,能不能给些思路呢,我现在不知道是自己哪里写的有问题,也不知道如何测试排除,崩溃时的崩溃信息显示错误模块是libcef.dll.另外,我是把用cef3显示的页面加载到了mfc的对话框里面,不知道您的网页是不是显示到浏览器中的。

  9. 我一直在用cef3,从来没有遇到过这种情况,应该是您的程序哪里有问题,cef3是很稳定的. 另外,不能用我这里的代码了,我这里的代码很旧了.

  10. 大神你好,现在我是已经把cef3嵌套到mfc里面了,但是会出现崩溃现象,一种崩溃是如果加载大的图片(一兆多),多次点击图片的时候,会崩溃。另一种情况就是不知道什么情况下,就突然崩溃了。网上查有说是v8引擎的问题,但是也有可能有是我自己的代码有问题,我也不清楚到底是哪的问题。大神有没有遇到过这种情况,或者说,给点意见,现在查资料已经查的心碎了,感觉像是无头苍蝇啊。

  11. 谢谢您的回答,我转成webm格式后展示页面,但是视频 是不动的,像个图片。
    我是直接用例子执行的,还没有自己写程序。

  12. 不是不支持video,而是不支持你的视频格式, chromium是不支持有版权的视频格式的 ,如mp4,但支持ogv,webm等.
    audio也一样,不支持mp3,但支持ogg

  13. 冒泡哦,2012年的4,5年前,现在就是10年前啊,我10年后的今天才开始弄cef,这5年都在弄手机

  14. 新版的chrome已经不支持旧的NPAPI插件,只支持PPAPI的插件. 还好的是,flash有PPAPI版的插件,需要到官网上下载.

  15. 博主,请问要如何使这个支持flash?已下载到了插件但不知道如何使用。
    依旧couldn’t load plugin!!!

  16. 你好,最近刚好在做这样的一个项目,但是无法浏览带证书的https的网站,有解决方案吗

  17. css引用在head里一般不会,如果对显示有很高的要求,可以先隐藏dom,js在onload事件时显示dom.

  18. libcef在加载html的时间只加载了html的功能部分 而关于显示的样式这部分没有加载成功

  19. 你好,我现在只有上传到文章的例子代码。 win8相关的我现在也不大研究,所以无法给点建议哦~

  20. 你好,目前有个需求,WinForm程序要加个浏览器,实现简单功能有例子吗,用VS自带的浏览器控件加载大的网站会卡,求解决例子走邮箱

    还有个问题,WinForm程序内的浏览器在WIN8.1系统平板上URL可以调出虚拟键盘,但是打开百度点搜索框却调不出虚拟键盘,大神有什么好思路解决吗(今天解决一天没找到问题所在)

    感谢宝贵时间

  21. 你好,请把整个项目文件给我发一份,非常感谢,由于初学c++编程,不知道怎么引用和配置,自己研究了很长时间也没有成功,谢谢!

  22. 您好,最近用到了OpenWebKitBrowser的插件,但是在这个里面应用的video标签不可以使用,网上找了很久,但是相关的资料也太少。现在就是想请教一下您这个问题可以怎么解决的?

  23. 其实cef也是跨平台的,只是窗口那儿的封装需要针对不同操作系统做单独开发,例如windows的窗口api或qt之类的窗口api.

  24. 你好,请教一下。现在我想通过java做个界面嵌入CEF的东西以嵌入blink内核的客户端,这其中我的理解是需要用到JNI来实现吧…如果用到JNI,应该就打破了Java的跨平台特性,那么如果要在linux和windows下都做一个嵌入blink的客户端,是否就需要为两种系统编写不同的代码,以生成相应的JNI呢。

  25. 不好传的哦,原代码网上有的下载,编译好的文件也有好几十MB大小。建议直接下载编译libcef

  26. 你好,大侠 能否给我下这个工程源码让我参考一下,只是这样看我还是搞不定,希望大侠助助小弟!

  27. 你好,我看了你回复别人的,你是江大的啊!真的很意外,我也是江大的O(∩_∩)O~

  28. 谢谢你!虽然你没有解答出我的问题,但我认你为你是一个good man!!你很乐于助人,perfect IT 人!

  29. 你好,不好意思没涉及到这方面哦。直觉上感觉用./cache可能会有问题,用绝对路径试一下呢?还有就是试试不要直接给cefSetting设置值,而是通过CefSetting::set方法试一下。

  30. 你好,看了你的介绍cef的帖子,觉得很不错,不知可否请教你几个问题:那就是你有没碰到过cef浏览器缓存更新方面的问题,我使用类似下面的语句
    CefSettings settings;
    CefString(&settings.cache_path).FromASCII(“.\\cache”);
    为浏览器设置了缓存,但是却发现页面更新出了问题。如果碰到过可否传授下解决方法,不甚感激!

  31. 编译例子的时候,出现了这个错误:error C2660: ‘CefBrowserHost::CreateBrowserSync’ : function does not take 4 arguments。这一段里的函数少一个参数:this->browser = CefBrowserHost::CreateBrowserSync(windowInfo, &client, CefString(“http://www.hoverlees.com”), CefBrowserSettings());

  32. 可以是可以的,是做成浏览器插件。flash的插件就是使用这种方式嵌入到浏览器中的,具体的实现,对于windows的IE而言,一般是使用activeX方式嵌入,其他平台的浏览器大多数使用NPAPI插件架构嵌入。但都不是exe,而是dll之类的动态链接库。

  33. 你好,请问能否将一个应用程序嵌入到浏览器中,例如,有一个.exe的应用程序,能否将次应用程序嵌入到浏览器中,给人的感觉就好像是这个应用程序是在浏览器中运行的一样

  34. tab控件不应该属于cef client里面的一部分,而是独立的窗口控件。比如,上面是四五个按钮,下面是5个cef client窗口,按其中一个按钮,都是显示某一个client而隐藏其他几个。
    如果你真要把tab做到网页里,那只需要一个控件,里面是你自己用html做的tab和一些iframe,那完全就是html的技术了。

  35. 博主,你好!
    我在cef.client中加了一个像chrome 的tab控件,然后想把tab控件和相应的浏览器页面关联起来。

    遇到的问题是,打开的每个子页面都是独立的,不想chrome浏览器能在一个界面上显示。 这个问题怎么解决了

  36. 最简单的方法是监听导航事件,当url是你指定的格式时,调用你的函数,如URL满足 action://function/params 格式时,调用你指定的函数。这时,js只要实现 location.href=”action://function/params”即可。

    如果是使用IE内核,C#可以设置WebBrowser的ObjectForScripting属性,C#基本不用,具体可看msdn.

  37. 博主,你好!找了几天资料,我只找到C#调用JS的方法:

    var mainFrame = browser.Browser.GetMainFrame();
    mainFrame.ExecuteJavaScript(“show()”,url, 0);

    但是,我现在需要实现:JS调用C#方法,不知道怎么写?

  38. 请教一下,我现在一个项目需要将CEF CHrome 嵌入到JAVA SWT 中,请问一下在OSGI Bundle插件项目下,如何集成 CEF,有示例就更好了!谢谢
    我的邮箱junxiu_1218@126.com

  39. 你好,只需要参考我上面的例子即可以把chrome作为控件嵌入到应用程序中。你首先需要下载libcef(可以直接下载编译好的库)

  40. 你好,我现在基于asp.net、HTML5开发了一个Web项目,项目需要和一个WinForm大项目集成,所以想在WinForm中设计一个窗体,嵌套Google浏览器,加载web网站,亲能否给个实例程序或者解决方案呢?跪求指导…

  41. 不好意思,今天看到chrome有用skia的。 canvas就是它实现的,cef将其封装并没有导出。

  42. 你好,程序就是文章中帖的那个,关键是要去下载libcef,并编译成动态库及静态链接导出库,然后就可以编译这段代码了。

  43. 你好,看了你的博客,你懂软件,硬件这么多东西,而且都很深入,真让人佩服!这几天我在做把Embedding Chrome嵌入到客户端,可否把你写的嵌入Chrome的这个程序给我发一下,谢谢!

  44. 现在正在做一个程序,刚好是需要嵌入chorme浏览器,看到你这篇介绍后肯定很受用,能不能跟你请教一些问题呢?