Qt和HTML间的交互式通过WebChannel来实现的。

WebChannel

WebChannel提供一种机制使得QObject或者QML访问HTML。所有的属性，信号和公共的槽函数都可以被HTML使用。

WebChannel由一些属性和方法组成。

属性包括：

registeredObjects

A list of objects which should be accessible to remote clients.

The objects must have the attached id property set to an identifier, under which the object is then known on the HTML side.

Once registered, all signals and property changes are automatically propagated to the clients. Public invokable methods, including slots, are also accessible to the clients.

If one needs to register objects which are not available when the component is created, use the imperative registerObjects method.

简单翻译一下：

这是一个提供给HTML访问的object列表。

object需要有id标识，这样才能被HTML识别。

object一旦被注册，所有的信号和属性的改变都会被自动传递到客户端。还包括公共的方法和槽。

如果组件创建时object还不可用，可以使用registerObject方法。

transports

A list of transport objects, which implementQWebChannelAbstractTransport. The transports are used to talk to the remote clients.

一个传输列表，实现了QWebChannelAbstractTransport类。用来跟客户端交互。

其它方法具体不再赘述，可以参考后面的参考文献。这里我们主要讲一下registeredObjects的用法。

registeredObjects提供给HTML访问的object列表。object须声明id属性，这样HTML才能知道它；同时，object要声明WebChannel.id，HTML使用该id访问对象。

QtObject定义如下：

QtObject {

id: myObject

WebChannel.id: "myWebObject"

property string name: "QtObjectName"

signal onMystringChanged(var myStr)

}

WebChannel定义如下：

WebChannel {

id: myChannel

registeredObjects: [myObject]

}

WebEngineView

WebChannel声明好之后，下面就是如何使用它。我们定义WebEngineView元素，用来加载HTML文件，并指定关联的WebChannel，使用方式如下：

WebEngineView {

    id: webView

    url: "./map.html"

    webChannel: myChannel

}

至此，QML端的工作就已经完成了。下面讲一下如何在HTML端使用WebChannel。

引入qwebchannel.js库

HTML想要使用QWebChannel，需要先引用qwebchannel库，这是一个JavaScript类库，使用方式如下：

<script type="text/javascript" src="qwebchannel.js"></script>

然后在增加如下代码：

new QWebChannel(qt.webChannelTransport, function(channel) {

var myClass = channel.objects.myClass;

var myObject = channel.objects.myWebObject;

myObject.onMystringChanged.connect(function(myStr) {

console.log(myStr);

});

});

调用页面js

 var functionStr = "jsFileCall()";

 webView.runJavaScript(functionStr, function(result){

        console.log(String(result));

 });

网页中的视频不能加载

通过以上方式加载网页后，如果网页中包含视频或音频之类的元素，是不能正常播放的，这是因为没有默认运行插件，如 flash player，设置方法如下：

webview.settings.pluginsEnabled:true

缓存路径，清除缓存

加载网页会有缓存产生，那么缓存的路径如下：

webview.profile.cachePath

清理缓存

webview.profile.clearHttpCache()