MFC的WebBrowser控件 C++与JavaScript之间数据交互传递

Posted 2022-12-03 allinallinallin

-----------------------------------------------------------------------------------------------------------------------------------------------

     最近开发MFC程序，用WebBrowser控件调用百度地图javascript API来展示轨迹，后台通过C++编写相关逻辑代码。

     VC++和JavaScript之间的数据传递交互是一个重要的问题！

     因此，本文主要来通过案例介绍上诉两者数据传递。

     源码地址：《源代码——MFC的WebBrowser控件C++与JavaScript之间的数据交互传递》

-----------------------------------------------------------------------------------------------------------------------------------------------

一、预备知识

Step1：在了解VC++与JavaScript数据交互之前，首先你要学会使用WebBrowser控件来调用百度地图API！

MFC使用WebBrowser控件调用百度地图JavaScript API简单案例！ 下载地址如下：（里面有使用说明）

http://download.csdn.net/detail/to_baidu/9825890

Step2：MFC中使用WebBrowser.Navigate()方法调用本地的.htm文件！

调用方法参看链接：http://blog.csdn.net/to_baidu/article/details/70787825

二、VC++传递数据给前端网页

其实在“预备知识的Step1”的简单案例中已经包含了VC++传递两个变量到JavaScript的方法：即调用CWebPage类的CallJScript()函数。

此处，在上面的基础上添加功能——将返回值传递给VC++！

实现方案如下：

1、在对话框或者视图的实现文件中，加入#include "WebPage.h"，在按钮的响应函数中就可以调用JavaScript函数了，具体代码如下：

void CGeoDemoDlg::OnShow()

	// TODO: 在此添加控件通知处理程序代码

	UpdateData(TRUE);//将屏幕上控件中的数据交换到变量中

	CWebPage cwp;
	cwp.SetDocument(m_myweb.get_Document());
	const CString funcName("justmarkfun");//justmarkfun为前端JS函数名
	CComVariant varResult;//存放调用JavaScript函数返回的返回值，但此处无用

	//这里m_JD和m_WD是与编辑框控件的两个CString类型变量,传入经度纬度值
	//这里参数的个数要与javascript函数justmakefun函数的个数相同,而且顺序要保持一致
	cwp.CallJScript(funcName,m_JD,m_WD,&varResult);//调用JS中的函数justmarkfun()，并传递两个参数m_JD和m_WD

2、在前端htm文件中的script标签中定义对应的函数，具体代码如下：

<script type="text/javascript">

    //显示该点
    function justmarkfun(JD, WD) 
        map.clearOverlays();//清理之前的标注
        var point=new BMap.Point(JD, WD);//创建该点
        var marker1 = new BMap.Marker(point);//创建标注
        window.map.addOverlay(marker1);//将标注添加到地图中
        map.centerAndZoom(point, 12);//以该点为中心展示地图
    

</script>

三、前端网页将值传递给VC++后端

1、在对话框或者视图的实现文件中，加入#include "WebPage.h"，在按钮的响应函数中调用JavaScript函数，通过varResult类来获取返回值，并做相应类型转换的处理。具体代码如下：

void CGeoDemoDlg::OnClickedGetdataFromhtml()

	// TODO: 在此添加控件通知处理程序代码

	CWebPage WebPage;
	CComVariant varResult;//存放调用JavaScript函数返回的返回值
	CString szTaskGPS;//字符串变量，用于记录编辑框中的GPS

	WebPage.SetDocument(m_myweb.get_Document());
	WebPage.CallJScript("GetGPS", &varResult);//GetGPS:js函数名，用于从前端获取经纬度的值
	szTaskGPS = (BSTR)varResult.pbstrVal;//存放经纬度返回值，从前端htm中js函数获得;要进行类型转换
	
	MessageBox(_T("从前台获取到当前的经纬度信息为:") + szTaskGPS,_T("提示！"),MB_ICONINFORMATION);
	
	AfxExtractSubString(m_JD2,szTaskGPS,0,',');//VC中AfxExtractSubString函数用于分割字符串，详情可网上百度
	AfxExtractSubString(m_WD2,szTaskGPS,1,',');

	UpdateData(FALSE);//将变量中的数据交换到屏幕上控件中

2、在前端htm文件中的script标签中定义对应的函数，具体代码如下：

<script type="text/javascript">

    //单击获取点击的经纬度
    map.addEventListener("click", function (e) 
        map.clearOverlays(); //清理之前的标注
        document.getElementById("gps").value = e.point.lng + ',' + e.point.lat;
        var marker = new BMap.Marker(e.point);
        map.addOverlay(marker); //将标注添加到地图中
    );
    //返回页面内容中的文本编辑框gps中的值
    function GetGPS() 
        return document.getElementById("gps").value;
    

</script>

注意：

1、上面JavaScript中的clearOverlays()、addOverlay()等函数是百度地图API中的函数，可详情见百度地图API官网。

2、上诉实现不用管CWebPage类起什么作用，直接用就行，因为CallJScript()函数是CWebPage类的成员函数。

2、如果想了解VC++与JavaScript前端数据交互的详细内容，请搜索有关“COM组件自动化”、“IDispatch接口”的文章。