Web页面嵌入到Qt注意事项

目前，web页面嵌入Qt框架方式：

Qt：系统、一级、二级菜单框架；底部消息栏。

Web：三级菜单子页面。

开发方式：在web环境下开发完成后，将单独页面嵌入到qt中，html、js等文件都作为资源加入到qt工程中。

1、html页面中引入webchannel库：

<script src="../../../../lib/qwebchannel.js"></script>

<script src="../../../../js/component/webchannel.js"></script>

其中，webchannel.js中，初始化了qt与web之间的通道，并定义qt与web之间的消息类型和内容。消息类型对应各个页面具体功能。新加的页面消息需要在该文件中添加。

2、Qt中相应子页面中加入web页面路径：

例如 epvl模型研判页面 JudgePool.qml：

以上步骤完成，就可以在Qt中看到web页面了。接下来需要注意的事项：

3、每个web页面下的初始化函数都必须在qt侧调用，因为初始化用到的一些如userinfo等信息需要Qt侧传入。并且在web页面初始化完成后调用。

（1）web页面中，加入页面初始化完成信号。

（2）Qt页面中，加入消息接收，并发送到web页面初始化消息。

（3）在webchannel.js中，加入web页面初始化函数。

4、遇到的问题：

（1）html中引入的js，如placecode.js等，都有初始化函数，凡是涉及到userinfo的都需要在qt侧调用。

（2）web中对文件名称大小写不区分，在Qt中严格区分。

（3）父页面d窗中是一个iframe的情况，iframe初始化问题解决方法：

iframe的路径不能在父页面静态加载，这样会导致iframe的js先于父页面的js加载，正常逻辑应该父页面的js先加载

需要在父页面定义一个方法来触发iframe的初始化方法

（4）页面跳转之后，需要调用跳转目的界面方法的问题：

1.web端js需要发出跳转信号

举例：案事件库的案件详情界面中跳转至【案件比对】(case_lib.js)

2.qt端qml接收跳转信号，调用CommonFun.jumpSystemPage方法，再向web端发信号调用目的界面的方法

注意: 目的界面有可能是初次打开，需要等目的界面初始化完成才能发调用web端方法（CaseLib.qml）

3.qt端目的界面需要定义初始化完成的信号，便于其他qt界面知道界面初始化完成:

(<u>compare_case.js</u>)

(<u>CompareCase.qm</u>l)

一、Qt Webkit 集成利用Qt的Webkit 集成与QtNetwork模块，你完全可以进行本地桌面与web混合应用开发，你可以自由地混合JavaScript，样式表，Web内容和Qt组件。 Webkit是一个非常成熟的web浏览引擎。Qt中集成了这个大名鼎鼎的引擎，通过QtWebkit，你可以在C++ 中执行JavaScript，或者在网页中集成C++对象，并且通过JavaScript和这些对象进行交互。一个现代的HTML渲染引擎只 是混合开发的一半，另一半就是本地应用和渲染对象的交互。QT的Webkit 集成提供了这种解决方案：1.使用object标签嵌入Qt Widgets组件。这可以让使用C++代码的Qt组件包含在网页中，作为网页的部分外观。2.在JavaScript中访问C++对象。你 可以在JavaScript环境中插入C++对象，让网页脚本直接访问你的数据结构。3.在Qt中执行JavaScript。你可以在C++ 调用网页环境中的JavaScript函数，触发网页事件。4.共享客户端存储。在JavaScript和C++中你都具有访问数据库的能 力，这样当下线时也能共享大量数据。二、与嵌入的Qt对象交互使用QWebView 组件，有两种方法可以在网页中嵌入C++对象。你可以在网页的JavaScript中添加C++对象，或者也可以创建一个插件，然后在网页中使用 object标签嵌入。

第二种方法更容易入手。当在网页中放入 Widget组件时，它的所有public slots就像普通函数一样被网页中的JavaScript函数访问。要在网页中添加一个Widget，首先要告诉你的QWebPage对象,该Widget可用,这个通过子类化QWebPlugFactory完成,你需要 重新实现两个方法：plugs和create。plugs方法通知网页该Widget可用，create方法根据请求创建widget。在HTML网页中，widgets使用object标签创建。比如，下面这个标签试图创建一个 application/x-qt-colorlabel 组件。 要利用这种创建，必须要允许使用插件并且要告诉QWebpage插件的工厂类。在下面的代码中，ColorLabelFactory将 会根据application/x-qt-colorlabel的请求创建相应实例。QWebSettings::globalSettings()->setAttribute(QWebSettings::PluginsEnabled, true)webView->page()->setPluginFactory(new ColorLabelFactory(this))ColorLabel有一个公开的slot: chagneColor(),这个对于网页中的JavaScript自动可用。在网页中插入一个指向该元素的链接，可以以一种简单的方式激活C++函数。Change color!a>要反方向推进事件，必须要使你的对象在JavaScript文档上下文中可用。要对QWebPage的每一个 QWebFrame，调用addToJavaScriptWindowObject方法。这个方法允许你根据名字把一个对象添加到JavaScipt上下 文中。webView->page()->mainFrame()->addToJavaScriptWindowObject( "eventSource", new eventSource( this ) )要连接刚添加对象eventSource的信号，要加上一段JavaScript代码，使用evaluateJavaScript方法 完成。下面的代码将把eventSource对象的signalName信号连接到一个JavaScript函数destFunction。webView->page()->mainFrame()->evaluateJavaScript( "eventSource.signalName.connect(destFunction)" )如果你把一个对象添加到一个以标准浏览器查看的JavaScript页面中，有一个信号需要知道。每一次JavaScript 内容被清除，Frame都会释放 javaScriptWindowObjectCleared 信号。

---