用Socket和MSHTML对象模型创建自己的浏览器

Visual C++ 专栏收录该内容
45 篇文章 0 订阅

                        用Socket和MSHTML对象模型创建自己的浏览器

    薛 瑛  

HTTP协议和WEB浏览器的诞生给我们的网络增加了更多的精彩。但在实际应用中我们可能会有不同的需要而不是单纯的使用浏览器,譬如在我们的应用程序中加入浏览互联网的功能。微软的ChtmlView类很方便的实现了网页浏览。但是它很不灵活,无法使用户动态地在网页上修改自己想要的元素。本文探讨一些方法使用Socket传输Html文档,利用微软的动态MSHTML对象模型实现一些浏览器的内部机制。
大家知道HTML文档是由标记语言构成,即俗称的Tag。微软的浏览器IE对于这些标记实现了一一对应的对象模型(objectmodel),由MSHTML.DLL封装。IE浏览器的实现也是由MSHTML.DLL来实现的。通过MSHTML.DLL我们可以直接操作对象模型的属性,方法。MSHTML的对象模型是基于COM组件对象的,对象的接口是基于Idispatch,操作MSHTML对象模型必须通过Idispatch接口。MSHTML中封装了许多这样的接口,例如,IhtmlAnchorElement接口对应与HTML文档中的超连接标记<A>,IHtmlHRElement接口对应<HR>标记,IhtmlTable接口对应<table>标记。其中最重要的是IhtmlDocument2接口,它对应Document组件。Document组件既相当于HTML文档。使用过Javascript的人对它应比较熟悉。
下面我们举例来讲解MSHTML的应用。在举例之前我先讲述一下Socket和HTTP协议。HTTP协议通过TCP连接服务器和Client,它工作在80端口。HTTP通过Client和Server之间的请求/应答机制进行通讯。HTTP消息分为Request和Response。每一种消息由开始行,消息头和消息体组成。形式如下:
generic-message = start-line
*message-header
CRLF
[ message-body ]
 
start-line的形式如下:
start-line = Request-Line | Status-Line
Request-Line为Client向Server发出的请求,形式如下:
Request-Line = Method SP Request-URI SP HTTP-Version CRLF
Method 包括GET,POST等,在本例中我们只简单的使用GET向服务器发出请求。 
详细的HTTP协议请参考RFC2068。
在VC++中建立新的单文档EXE工程文件,为了使用MSHTML我们的视图类继承自ChtmlView。ChtmlView类封装了MSHTML接口。给工程中加入Socket类。
class CHttpSocket : public CSocket
{
………………
 
protected:
CWnd * m_pParentWnd;
}
其中m_pParentWnd指向我们的视图类,用于传送消息。在视图类中定义Socket。
class CSkhttpView : public CHtmlView
{
protected: // create from serialization only
CSkhttpView();
DECLARE_DYNCREATE(CSkhttpView)
…………….
protected:
CHttpSocket m_socket;
IHTMLDocument2 * phmDoc2;
……..
}
phmDoc2为IHTMLDocument2接口。初始化Socke,连接我们欲登录的站点,假设为

www.163.net
CSkhttpView::CSkhttpView()
{
// TODO: add construction code here
BOOL bRet=m_socket.Create(0,SOCK_STREAM,NULL); 
if(!bRet)
MessageBox("socket create error",NULL,MB_OK);
m_socket.SetParentWnd(this); 
if(!m_socket.Connect(www.163.net,80))
MessageBox(“socket connect error”,NULL,MB_OK);
}
下面我们取得IhtmlDocument2的接口。此接口的获得一般有两种方法。一是使用CoCreateInstance,然后调用QueryInterface。另一种是使用MSHTML控件对象的get_Document,在ChtmlView类中封装了这个接口。我们使用后一种。需要注意的是,我们需要在ChtmlView生成IhtmlDocument对象后才能获得它的接口。
void CSkhttpView::OnInitialUpdate() 
{
Navigate2(“about:blank”);
}
void CSkhttpView::OnDocumentComplete(LPCTSTR lpszURL)
{
LPDISPATCH lpdisp;
HRESULT hr;
lpdisp=GetHtmlDocument();
hr=lpdisp->QueryInterface(IID_IHTMLDocument2,(void **)&phmDoc2);
}
在ChtmlView初始化时调用Navigate2()产生空文档,文档产生后调用GetHtmlDocument获得一个Idispatch()接口,调用QueryInterface获得IHTMLDocument2接口。
void CSkhttpView::OnReceiveMessage(WPARAM wParam,LPARAM lParam)
{
HRESULT hr;
char buf[5000];
int inum;
IHTMLElement * pEleBody;
if(wParam==0)
{
inum=m_socket.Receive(buf,sizeof(buf),0);
buf[inum]=0;
_bstr_t bsrBody(buf);
hr=phmDoc2->get_body(&pEleBody);
hr=pEleBody->put_innerHTML(bsrBody); 
}

 
void CSkhttpView::OnControlSend() 
{
// TODO: Add your command handler code here
char buf[1000];
wsprintf(buf,"GET http://www.163.net HTTP/1.1/r/n/r/n");
int iRet=m_socket.Send(buf,lstrlen(buf),0);
if(iRet==SOCKET_ERROR)
MessageBox(“socket send error”,NULL,MB_OK);
}
我们向服务器发送HTTP协议的请求”GET http://www.163.net HTTP/1.1/r/n/r/n”,它取回指定URI地址的网页。服务器发出回应我们通过Socket接受。IhtmlDocument2内含许多对象借口,通过许多的put_,get_方法我们可以获得这些对象的属性,事件,方法。本例中我们获得body对象,它对应于HTML文挡中<body></body>对象。通过IhtmlDocument2的get_body()得到指定body对象的IHTMLElement接口,调用IHTMLElement接口的put_innerHTML()将接受到的内容放入Document中。此时在我们的视图中就会显示网页。
本文只是简略的介绍了一下MSHTML对象,它里面实际包含了许多的接口和函数,通过这些接口我们可以任意设计我们自己风格的浏览器。有兴趣的同志可以参阅MSDN文档。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
<p style="color:#666666;"> <span style="font-size:14px;">本门课程重实战,将基础知识拆解到项目里,让你在项目情境里学知识。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">这样学习方式能让你保持兴趣、充满动力,时刻知道学东西能在哪、能怎么。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">平时不明白知识点,放在项目里去理解就恍然大悟了。</span> </p> <p style="color:#666666;"> <span></span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>一、融汇贯通</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本视频采了前后端分离开发模式,前端使Vue.js+Element UI实现了Web页面呈现,后端使Python Django框架实现了数据访问接口,前端通过Axios访问后端接口获得数据。在学习完本章节后,真正理解前后端各自承担工作。</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>二、贴近实战</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">本系列课程为练手项目实战:学生管理系统v4.0开发,项目包含了如下几个内容:项目总体介绍、基本功能演示、Vuejs初始化、Element UI使、在Django中实现针对数据增删改查接口、在Vuejs中实现前端增删改查、实现文件上传、实现表格分页、实现导出数据到Excel、实现通过Excel导入数据、实现针对表格批量化操作等等,所有功能都通过演示完成、贴近了实战</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>三、课程亮点</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">在本案例中,最大亮点在于前后端做了分离,真正理解前后端各自承担工作。前端如何后端交互</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="color:#FF0000;font-size:14px;"><strong>适合人群:</strong></span> </p> <p style="color:#666666;"> <span style="font-size:14px;">1、有Python语言基础、web前端基础,想要深入学习Python Web框架朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">2、有Django基础,但是想学习企业级项目实战朋友;</span> </p> <p style="color:#666666;"> <span style="font-size:14px;">3、有MySQL数据库基础朋友</span> </p> <p style="color:#666666;"> <span style="font-size:14px;"> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><img alt="" src="https://img-bss.csdnimg.cn/202009070752197496.png" /><br /> </span> </p> <p style="color:#666666;"> <span style="font-size:14px;"><br /> </span> </p>
<div style="color:rgba(0,0,0,.75);"> <span style="color:#4d4d4d;"> </span> <div style="color:rgba(0,0,0,.75);"> <span style="color:#4d4d4d;"> </span> <div style="color:rgba(0,0,0,.75);"> <div style="color:rgba(0,0,0,.75);"> <span style="color:#4d4d4d;">当前课程中商城项目实战源码是我发布在 GitHub 上开源项目 newbee-mall (新蜂商城),目前已有 6300 多个 star,</span><span style="color:#4d4d4d;">本课程是一个 Spring Boot 技术栈实战类课程,课程共分为 3 大部分,前面两个部分为基础环境准备相关概念介绍,第三个部分是 Spring Boot 商城项目功能讲解,让大家实际操作并实践上手一个大型线上商城项目,并学习到一定开发经验以及其中开发技巧。<br /> 商城项目所涉及功能结构图整理如下:<br /> </span> </div> <div style="color:rgba(0,0,0,.75);">   </div> <div style="color:rgba(0,0,0,.75);"> <p style="color:#4d4d4d;"> <img alt="modules" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3N0b3JlL25ld2JlZS1tYWxsLXMucG5n?x-oss-process=image/format,png" /> </p> </div> <p style="color:rgba(0,0,0,.75);"> <strong><span style="color:#e53333;">课程特色</span></strong> </p> <p style="color:rgba(0,0,0,.75);">   </p> <div style="color:rgba(0,0,0,.75);">   </div> <div style="color:rgba(0,0,0,.75);"> <ul> <li> 对新手开发者十分友好,无需复杂操作步骤,仅需 2 秒就可以启动这个完整商城项目 </li> <li> 最终实战项目是一个企业级别 Spring Boot 大型项目,对于各个阶段 Java 开发者都是极佳选择 </li> <li> 实践项目页面美观且实,交互效果完美 </li> <li> 教程详细开发教程详细完整、文档资源齐全 </li> <li> 代码+讲解+演示网站全方位保证,向 Hello World 教程说拜拜 </li> <li> 技术栈新颖且知识点丰富,学习后可以提升大家对于知识理解掌握,可以进一步提升你市场竞争力 </li> </ul> </div> <p style="color:rgba(0,0,0,.75);">   </p> <p style="color:rgba(0,0,0,.75);"> <span style="color:#e53333;">课程预览</span> </p> <p style="color:rgba(0,0,0,.75);">   </p> <div style="color:rgba(0,0,0,.75);">   </div> <div style="color:rgba(0,0,0,.75);"> <p style="color:#4d4d4d;"> 以下为商城项目页面功能展示,分别为: </p> </div> <div style="color:rgba(0,0,0,.75);"> <ul> <li> 商城首页 1<br /> <img alt="" src="https://img-bss.csdnimg.cn/202103050347585499.gif" /> </li> <li> 商城首页 2<br /> <img alt="" src="https://img-bss.csdn.net/202005181054413605.png" /> </li> <li>   </li> <li> 购物车<br /> <img alt="cart" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3QvY2FydC5wbmc?x-oss-process=image/format,png" /> </li> <li> 订单结算<br /> <img alt="settle" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3Qvc2V0dGxlLnBuZw?x-oss-process=image/format,png" /> </li> <li> 订单列表<br /> <img alt="orders" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3Qvb3JkZXJzLnBuZw?x-oss-process=image/format,png" /> </li> <li> 支付页面<br /> <img alt="" src="https://img-bss.csdn.net/201909280301493716.jpg" /> </li> <li> 后台管理系统登录页<br /> <img alt="login" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3QvbWFuYWdlLWxvZ2luLnBuZw?x-oss-process=image/format,png" /> </li> <li> 商品管理<br /> <img alt="goods" src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9uZXdiZWUtbWFsbC5vc3MtY24tYmVpamluZy5hbGl5dW5jcy5jb20vcG9zdGVyL3Byb2R1Y3QvbWFuYWdlLWdvb2RzLnBuZw?x-oss-process=image/format,png" /> </li> <li> 商品编辑<br /> <img alt="" src="https://img-bss.csdnimg.cn/202103050348242799.png" /> </li> </ul> </div> </div> </div> </div>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值