QT与JavaScript互调

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

QT与JavaScript互调 - 虹的日志 - 网易博客

QT与JavaScript互调

2012-05-29 21:43:14| 分类：技术 | 标签：qt javascript webkit qwebkit |举报 |字号大中小订阅

一、QT中文支持

//编码设置

QTextCodec *codec = QTextCodec::codecForName("GBK");

QTextCodec::setCodecForCStrings(codec);

QTextCodec::setCodecForLocale(codec);

QTextCodec::setCodecForTr(codec);

//使用中文字符串

setWindowTitle(tr("JavaScript测试"));

二、QT支持Js流程

QT与JavaScript互调是通过QWebFrame的两个函数来实现的:addToJavaScriptWindowObject()将QObject对象传给JS，这样JS就能调用QObject的public slots函数。QT通过evaluateJavaScript()直接调用JS中的函数。流程如下（《QT高级编程》中插图）：

三、示例

使用QWebKit创建一个包含浏览器和工具按钮窗口，在该浏览器中载入包括Js的html，工具按钮调用html中的js

1、工程中引入 webkit

工程文件中增加加：QT += webkit network

2、载入html网页

m_pWebView = new QWebView;

m_pWebView->load(QUrl(tr("G:\\html特效示例\\jsTest.html")));

3、开户js支持

QWebSettings *pWebSettings = m_pWebView->page()->settings();

pWebSettings->setAttribute(QWebSettings::JavascriptEnabled,true);

4、窗体布局

//添加按钮

QPushButton *pEventBtn = new QPushButton(tr("QT Invok Js"));

QPushButton *pcloseBtn = new QPushButton(tr("close"));

//布局：网页与按钮为上下布局，两按钮为水平居中布局

QHBoxLayout *pBtnLayout = new QHBoxLayout;

pBtnLayout->addWidget(pEventBtn);

pBtnLayout->addWidget(pcloseBtn);

pBtnLayout->setAlignment(Qt::AlignCenter);

QVBoxLayout *pMainLayout = new QVBoxLayout;

pMainLayout->addWidget(m_pWebView);

pMainLayout->addLayout(pBtnLayout);

QWidget *widget = new QWidget;

widget->setLayout(pMainLayout);

setCentralWidget(widget);

5、建立信号与槽

//每次载入html时发送段信号

connect(m_pWebView->page()->mainFrame(),SIGNAL(javaScriptWindowObjectCleared()), this,SLOT(addObjectToJs()));

//按钮信号

connect(pEventBtn,SIGNAL(clicked()),this,SLOT(testJs()));

connect(pcloseBtn,SIGNAL(clicked()),this,SLOT(close()));

6、JS调用QT中的public slots

6.1、头文件中申明public slots:

public slots:

void jsInvokQt();

6.2、将QObject与js绑定

void MainWindow::addObjectToJs()

{

m_pWebView->page()->mainFrame()->addToJavaScriptWindowObject("MainWindow",this);

}

6.3、Js中调用QT的 jsInvokQt()函数

function disp_qtmessage()

{

MainWindow.jsInvokQt();

}

7、QT调用JS函数disp_messagebox()

void MainWindow::testJs()

{

m_pWebView->page()->mainFrame()->evaluateJavaScript("disp_messagebox()");

}

四、附含JS的html源码:

<html>

<head>

<script type="text/javascript">

function disp_messagebox()

{

alert("This is javaScript MessageBox!")

}

function disp_qtmessage()

{

MainWindow.jsInvokQt();

MainWindow.setInfor("Qt change string");

alert(MainWindow.getInfor());

}

</script>

</head>

<body>

<input type="button" onclick="disp_qtmessage()" value="InvokQt" />

</body>

</html>