QT调用JS:
简单的执行 evaluateJavaScript 即可,把JS的函数和参数组合成一个字符串作为参数传入,这个函数会返回一个 QVariant 类型的返回值,如果JS有返回值的话,接收解析即可。
ui->webView->page()->mainFrame()->evaluateJavaScript(QString("QtCallNoParam()"));
JS调用QT:
第一步:将QT窗口暴露到JS
构造时连接:
connect(ui->webView->page()->mainFrame(),SIGNAL(javaScriptWindowObjectCleared()),this,SLOT(addMainWindowToHtml()));
暴露:
void MainWindow::addMainWindowToHtml(){
ui->webView->page()->mainFrame()->addToJavaScriptWindowObject("QTWindow",this);
}
这样就将QT窗口以 QTWindow 这个名字暴露给JS了。
第二步:在QT中实现 Q_INVOKABLE 的函数
定义:
public:
Q_INVOKABLE void JsCallNoParam();
实现:
//暴露给js的无参函数
void MainWindow::JsCallNoParam(){
qDebug()<<__PRETTY_FUNCTION__<<__LINE__;
}
在JS:使用QT暴露的QTWindow调用Q_INVOKABLE的函数即可
function JsNoParam() {
console.log("JsNoParam");
QTWindow.JsCallNoParam();
}
完整代码:
mainwindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H
#include <QMainWindow>
#include <QTimer>
namespace Ui {
class MainWindow;
}
class MainWindow : public QMainWindow {
Q_OBJECT
public:
explicit MainWindow(QWidget *parent = 0);
~MainWindow();
private slots:
void onPageLoadFinished(bool);
void on_btn_noparam_clicked();
void on_btn_withparam_clicked();
void on_btn_withreturn_clicked();
public slots:
void addMainWindowToHtml();
public:
Q_INVOKABLE void JsCallNoParam();
Q_INVOKABLE void JsCallWithParam(int num,QString str);
Q_INVOKABLE QString JsCallWithReturn();
private:
Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H
mainwindow.cpp
#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <QDebug>
#include <QMouseEvent>
#include <QtWebKit/QWebView>
#include <QtWebKit/QWebPage>
#include <QtWebKit/QWebPage>
#include <QtWebKit/QWebFrame>
#include <QWebInspector>
#include <QWebSettings>
#include <QVariantList>
MainWindow::MainWindow(QWidget *parent) :
QMainWindow(parent),
ui(new Ui::MainWindow){
ui->setupUi(this);
ui->webView->load(QUrl("qrc:/html.html"));
//如果加载的html是本地的,则换成
//ui->webView->load(QUrl::fromLocalFile("E:/html.html"));
//页面加载完成的消息
connect(ui->webView, SIGNAL(loadFinished(bool)), this, SLOT(onPageLoadFinished(bool)));
//将QT窗口暴露给html
connect(ui->webView->page()->mainFrame(),SIGNAL(javaScriptWindowObjectCleared()),this,SLOT(addMainWindowToHtml()));
//html调试窗口
QWebSettings *settings = ui->webView->settings();
settings->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);
QWebInspector *inspector = new QWebInspector(this);
inspector->setWindowFlags(Qt::WindowStaysOnTopHint | Qt::Dialog);
inspector->setMinimumSize(300, 110);
inspector->setPage(ui->webView->page());
inspector->show();
}
MainWindow::~MainWindow(){
delete ui;
}
//页面加载完成
void MainWindow::onPageLoadFinished(bool){
qDebug()<<__PRETTY_FUNCTION__<<__LINE__<<ui->webView->url().toString();
}
//暴露QT主窗口到html
void MainWindow::addMainWindowToHtml(){
ui->webView->page()->mainFrame()->addToJavaScriptWindowObject("QTWindow",this);
}
//暴露给js的无参函数
void MainWindow::JsCallNoParam(){
qDebug()<<__PRETTY_FUNCTION__<<__LINE__;
}
//暴露给js的有参函数
void MainWindow::JsCallWithParam(int num,QString str){
qDebug()<<__PRETTY_FUNCTION__<<__LINE__<<num<<str;
}
//暴露给js有返回值的函数
QString MainWindow::JsCallWithReturn(){
qDebug()<<__PRETTY_FUNCTION__<<__LINE__;
return QString("This is a string from Qt window.");
}
//无参调用JS
void MainWindow::on_btn_noparam_clicked(){
qDebug()<<__PRETTY_FUNCTION__<<__LINE__;
ui->webView->page()->mainFrame()->evaluateJavaScript(QString("QtCallNoParam()"));
}
//有参调用JS
void MainWindow::on_btn_withparam_clicked(){
qDebug()<<__PRETTY_FUNCTION__<<__LINE__;
ui->webView->page()->mainFrame()->evaluateJavaScript(QString("QtCallWithParam(123,\"QT String Param.\")"));
}
//JS有返回值的情况
void MainWindow::on_btn_withreturn_clicked(){
QVariant ret = ui->webView->page()->mainFrame()->evaluateJavaScript(QString("QtCallWithReturn()"));
qDebug()<<__PRETTY_FUNCTION__<<__LINE__<<" RET:"<<ret;
}
html.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html{
width: 100%;
height: 100%;
overflow: hidden;
margin:0;
}
input{
width: 100%;
height: 33.34%;
}
</style>
</head>
<body>
<input type="BUTTON" value="无参调用QT" onclick="JsNoParam()"></input>
<input type="BUTTON" value="有参调用QT" onclick="JsWithParam()"></input>
<input type="BUTTON" value="QT有返回值" onclick="JsWithReturn()"></input>
</body>
<script type="text/javascript">
function JsNoParam() {
console.log("JsNoParam");
QTWindow.JsCallNoParam();
}
function JsWithParam() {
console.log("JsWithParam");
QTWindow.JsCallWithParam(2333,"JS String Param.");
}
function JsWithReturn() {
var ret = QTWindow.JsCallWithReturn();
console.log("JsWithReturn RET:" + ret);
}
function QtCallNoParam() {
console.log("QtCallNoParam");
}
function QtCallWithParam(num,str) {
console.log("QtCallWithParam param:" + num + " " + str);
}
function QtCallWithReturn() {
console.log("QtCallWithReturn");
return "This is a String from JS.";
}
</script>
</html>
效果: