qt与js互相调用

Posted jenny2015

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了qt与js互相调用相关的知识,希望对你有一定的参考价值。

二、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、将QObjectjs绑定

void MainWindow::addObjectToJs()

{

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

}

6.3Js中调用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>

以上是关于qt与js互相调用的主要内容,如果未能解决你的问题,请参考以下文章

QT和JS的互相调用例子

qt 模态对话框可以互相调用吗

Android与js互相调用

Android与JS互相调用以及注意

iOS下JS与OC互相调用--WKWebView 拦截URL

iOS下JS与OC互相调用--UIWebView 拦截URL