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


94 responses to “HTML5浏览器嵌入窗口程序解决方案”

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

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

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

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

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

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

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

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

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

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

Leave a Reply

Your email address will not be published.