MFC与第三方类库CWebPage开发javascript函数调用示例

本是古典何须时尚 2023-07-12 03:50 20阅读 0赞

今天思索一个问题，想着怎么用c++调用百度地图，结果网上有一篇文章介绍了如何使用[MFC项目结合CWebPage来调用百度地图][MFC_CWebPage]。看了整篇博客，思路很清晰，但是看下来，其实就是利用了MFC调用html页面的javascript函数来达到调用百度地图的目的。本质上还是web应用的地图。不是真正意义上的从无到有加载百度地图。自己通篇搞下来，也算是积累了一些经验。我认为这个是一个MFC调用html页面的javascript函数的应用。下面介绍如何一步一步实现MFC调用html页面的javascript函数。

这里准备工作：

1.      你需要安装VC++6.0。
2.     会一点javascript书写技巧。
3.     知道如何使用百度地图api。
4.     知道如何使用MFC。

接下来进入正题，先创建一个html页面，可以是外部的，也可以是项目里面的，我这里因为使用了百度地图，而且它需要开启一个http服务，否则无法使用百度地图的lbs服务。

###     准备html页面 ###

index.htm

<!doctype html>
    <html>
    	<head>
    		<meta charset="UTF-8"/>
    		<title>map</title>
    		<style>
    			html,body{height:100%;width:100%;padding:0;margin:0;}
    			#root{height:100%;}
    		</style>
    		<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=YcP5EukTHUoFR3oObxdfBHTfA3EUgHET"></script>
    	</head>
    	<body>
    		<div id="root"></div>
    		<script type="text/javascript">
    			window.onload = function(){
    				var map = new BMap.Map("root");
    				map.centerAndZoom(new BMap.Point(116.404,39.915),15)
    				map.enableScrollWheelZoom()
    			}
    			
    			function getMessage(latitude,longitude){
    				return ("纬度:"+latitude+",经度:"+longitude);
    			}
    		</script>
    	</body>
    </html>

这个页面加载了百度地图，我们另外编写了一个getMessage()的函数，其实就是一个测试回调的函数，我们通过MFC结合CWebPage类可以调用就行了，这里的功能很简单，就是返回一个拼接的字符串。

进入html文件目录下的命令行，通过python命令开启一个http服务，这样，在浏览器中我们可以通过输入url的方式来访问页面。

![20200306215558262.png][]

浏览器访问页面：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70][]

以上是准备工作，下面进入MFC项目的创建以及加载页面，调用页面的javascript函数编码工作。

###     创建MFC工程 ###

创建工程，第一步选择MFC AppWizard \[exe\]，工程名称随便定义，我这里是GeoDemo

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1][]

第二步，选择基于对话框的工程：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 2][]

因为后面需要在对话框中拉出一个浏览器控件，用来加载html页面。创建成功就是这个样子 ：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 3][]

接下来，我们需要修改界面。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 4][]

接着在界面左侧增加一个浏览器控件，用来加载html页面，在界面右键，选择Insert ActiveX Control：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 5][]

选择Microsoft Web Browser这个控件，点击OK。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 6][]

在页面尽量拉宽一点，最后长这个样子：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 7][]

运行之后，长这样子：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 8][]

下面开始设置变量，增加处理函数，加载页面，调用回调函数。具体做法是，在界面右键，选择ClassWizard，选择第二个tab页面，对浏览器控件增加一个变量，会有警告：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 9][]

我们根据提示，需要加入CWebBrowser2的头文件和源文件，直接点击“OK”按钮：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 10][]

接着，设置变量m\_myweb：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 11][]

我们对经度纬度编辑框也设置变量：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 12][]

为界面的“调用函数”按钮控件增加响应，在按钮控件上右键选择Events，最后对“单击”事件添加处理函数：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 13][]

接下来，就是编写代码的时候了，前面主要是拖拽控件，以及设置变量，设置处理句柄。我们在编写代码之前，需要将第三方的CWebPage类库的头文件和源码文件加入到项目中，我这里直接给出来。有两个文件：WebPage.h与WebPage.cpp。

我们先将他们放在项目路径下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 14][]

接着在菜单栏Project->Add To Project->Files选择项目路径下的两个文件：WebPage.h和WebPage.cpp，[这两个文件][Link 1]在文末也会给出地址，不用担心上哪下载 。

我们在源文件GeoDemoDlg.cpp文件中编写我们将要添加的代码，我们需要引入WebPage.h。

\#include "WebPage.h"

接着在OnInitDialog()方法中的最后return语句之前，增加一句代码：

m\_myweb.Navigate("http://127.0.0.1:8000/index.htm",NULL,NULL,NULL,NULL);

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 15][]

接着在我们的“回调函数 ”按钮处理函数这里（我这里是OnCallback），书写我们通过CWebPage类库调用javascript函数的代码：

void CGeoDemoDlg::OnCallback() 
    {
        // TODO: Add your control notification handler code here
        UpdateData(true);
        CWebPage webpage;
        webpage.SetDocument(m_myweb.GetDocument());
        const CString functionName("getMessage");
        CComVariant varResult;
        webpage.CallJScript(functionName,m_latitude,m_longitude,&varResult);
        //varResult.ChangeType(VT_BSTR);
        CString msg;
        msg = varResult.bstrVal;
        MessageBox(msg);
    }

解释一下，我这里是根据输入的经纬度，传给getMessage(m\_latitude,m\_longitude)函数 ，然后getMessage函数会返回拼接的字符串给MFC，这里再将结果通过MessageBox显示出来。达到了测试回调函数的目的。

第一次编译运行，加载页面会很慢，需要等待一段时间对话框中的页面才加载出来。

![20200306231919826.gif][]

以上代码演示就完成了，最后给出代码的github地址： [https://github.com/buejee/GeoDemo][Link 1]

[MFC_CWebPage]: https://blog.csdn.net/u013018721/article/details/51089196?locationNum=2&fps=1
[20200306215558262.png]: https://img-blog.csdnimg.cn/20200306215558262.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200306215619786.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200306220639433.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200306220929883.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200306221130983.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200306221751330.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200306222307618.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200306222342487.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200306222431753.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200306222547357.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200306222959111.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200306223150389.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/2020030622340973.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20200306223604235.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20200306224020161.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20200306224734814.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[Link 1]: https://github.com/buejee/GeoDemo
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20200306225250756.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[20200306231919826.gif]: https://img-blog.csdnimg.cn/20200306231919826.gif