Qt与HTML/JavaScript网页端通信和调用

QWebChannel类

QWebChannel弥补了C++与HTML/JavaScript直接通信的空白。Qt内部自带了qwebchannel.js文件,只要浏览器端支持该js文件,就可以完成相互通信。在通信时,需要在浏览器端的HTML文件中引用该文件。
常用函数:
注册用的函数:
void QWebChannel::registerObject(const QString &id, QObject *object)id表示js端调用的类的名称,object表示C++端需要调用的类。

浏览器端注册
在浏览器的界面端需要加载这个QWebChannel
void QWebEnginePage::setWebChannel(QWebChannel *channel)
这是一个重载函数,浏览器的界面会使用这个channel,并把这个channel安装在JavaScript的世界中。那么,浏览器端就会包含并可以调用这个channel

具体方案

一下代码参考自QtCreator自带的markdown例子,要求5.6版本以及以上
假设在一个C++端的构造函数中,我们注册一个channel,具体代码如下:

QWebEnginePage* page=new QWebEngindPage(this);    // 注册一个网页界面
// preview 是一个QWebEngineView类,相当于一个浏览器引擎,假设这是我们在UI界面中设计并命名的
ui->preview->setPage(page);   

QWebChannel* channel=new QWebChannel(this);  
// 注册浏览器端js可以调用的类,假设m_content是我们自定义的一个继承QObject的类
channel->registerObject(QString("content"),&m_content);  
page->setWebChannel(channel);   // 在浏览器端注册。

在浏览器端的HTML/JaveScript代码中,可以这样使用:

<head>
  <script src="qwebchannel.js"></script>  <!--必须要包含这个文件-->
</head>
<body>
  <script>
  new QWebChannel(qt.webChannelTransport,
    function(channel) {
      var content = channel.objects.content;  // 注意这里的名字与注册时的一致
      updateText(content.text);  // js自定义的函数
       // textChanged是content自定义的一个信号,相当于信号连接了一个函数
      content.textChanged.connect(updateText);  
    }
  );
  </script>
</body>

猜你喜欢

转载自blog.csdn.net/qq_35976351/article/details/80002841