html页面随浏览器,HTML5浏览器嵌入窗口程序解决方案

冷不防 2022-10-06 00:58 0阅读 0赞

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

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

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/

![8e877a0e52cd4401c093094ab8ae22e0.png][]

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

/\*\*

\* libcef test application.

\* @author Hoverlees me\[at\]hoverlees.com

\*/

\#include

\#include "HoverWindow.h"

\#include

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 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);

\};

[8e877a0e52cd4401c093094ab8ae22e0.png]: /images/20221005/c521820a3e3e4161bdf40e91f6382b92.png

html页面随浏览器,HTML5浏览器嵌入窗口程序解决方案

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 html5：notification(浏览器通知)

相关 HTML5 SSE 浏览器发送事件

相关浏览器打开.html测试

相关 html随着页面滑动,实现桌面和移动浏览器元素随页面滚动产生动画

相关 html5页面的手势,html5+ 手势滑动更改窗口

相关浏览器渲染HTML页面的过程

相关 HTML5 HTML5 浏览器支持 (stage1-7)

相关【Html】浏览器页面Tab上面显示小图标

相关来源：跨浏览器的HTML5 Audio解决方案 - Audio5js

相关 HTML5 Notification实现浏览器通知