Qt4.8.6与JS交互

最近在项目中要用到QtWebkit，通过QWebview加载高德地图并实现Qt与JS的交互

Qt提供了本地C++对象与JavaScript的无缝集成，可以进行本地与web混合应用开发。

在QT的帮助文档中，有上述图片

QWebView由其他对象组成，如QWebFrame和QWebPage。

QWebPage类提供了用于查看和编辑web文档的对象

拥有一个主框架，负责Web内容、设置、导航链接和操作的历史

这个类可以与QWebFrame一起用于在无小部件环境中提供像QWebView这样的功能

QWebFrame类表示网页中的框架

每个QWebPage对象包含至少一个框架即主框架，使用QWebPage::mainFrame()获得

OK，下面来看一下具体的调用

QT调用JS的函数：

左图为他们的调用关系

相关代码：

QWebFrame *frame = m_webView->page()->mainFrame();
QString methodAdd = QString("AddPoint(\"%1\",\"%2\",\"%3\",\"%4\",\"%5\",\"%6\")").arg(longitude).arg(latitude).arg(id).arg(floor).arg(address).arg(name);
​​​​​​​frame->evaluateJavaScript(methodAdd);

其中AddPoint为JS中的函数，evaluateJavaScript()函数的介绍如下

JS调用QT的函数：

左图为他们的调用关系

addToJavaScriptWindowObject()函数的介绍如下：

第一个参数name为对象在javaScript里的名字，可以自由命名（如：TopoGisView）

第二个参数object对应的QObject实例指针（如：this）

相关代码：

在JS调用该QObject之前调用这个函数，根据文档介绍将这个函数放到一个signal的槽函数中调用

connect(m_webView->page()->mainFrame(), SIGNAL(javaScriptWindowObjectCleared()),this,SLOT(populateJavaScriptWindowObject()));

将QObject与js绑定

void TopoGisView::populateJavaScriptWindowObject()
{
    m_webView->page()->mainFrame()->addToJavaScriptWindowObject("TopoGisView" , this);
}

OK，现在就可以在JS中调用QT的函数了

不过值得注意的是，上述函数介绍中说明了要将所需调用的函数也声明为公有槽函数（public slots:），普通函数是无法被调用的

JS相关代码：

function JumpTo(){
		TopoGisView.getSignal(markerClickLnt, markerClickLat);
	}

function AddPoint(longitude,latitude,id,floor,address,name)
	{
		var marker = new AMap.Marker({
			position: [longitude, latitude],
			icon: markerIcon,
			extData : {"markerId":id,
				"markerLng":longitude,
				"markerLat":latitude,
				"markerFloor":floor,
				"markerName":name,
				"markerAddress":address
			},	//自定义楼层
		});
		marker.setMap(mymap);
		// 设置鼠标划过点标记显示的文字提示
		marker.setTitle(name);
		// 设置label标签
		// label默认蓝框白底左上角显示，样式className为：amap-marker-label
		marker.setLabel({
			//修改label相对于maker的位置
			offset: new AMap.Pixel(20, 0),
			content:name
		});
		
		var infoWindow = new AMap.InfoWindow({
			isCustom: true,  //使用自定义窗体
			content: createInfoWindow(title, content.join("<br/>")),
			offset: new AMap.Pixel(16, -45)
		});
		
		//鼠标点击marker弹出自定义的信息窗体
		AMap.event.addListener(marker, 'click', function (e) {
			infoWindow.open(mymap, marker.getPosition());//在地图的指定位置打开信息窗体
			
		});
		
		//点击获取经纬度的值
		marker.on('click', function(e) {
			markerClickLnt = longitude;
			markerClickLat = latitude;
		});
	}

OK，到此就能简单的理解并使用QT与JS的交互啦

欢迎大家指教，希望大家喜欢

路漫漫其修远兮，同志仍须努力